docs/data/material/components/use-media-query/ServerSide.js - master - githubmirror/material-ui

docs/data/material/components/use-media-query/ServerSide.js

33 строки789 B

Brijesh Bittu

[code-infra] Remove React import requirement for jsx (#47146)

29 окт 2025, 20:55

29 окт 2025, 20:556c9e82f

import mediaQuery from 'css-mediaquery';
import { ThemeProvider } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery('(min-width:600px)');

  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
}

export default function ServerSide() {
  const ssrMatchMedia = (query) => ({
    matches: mediaQuery.match(query, {
      // The estimated CSS width of the browser.
      width: 800,
    }),
  });

  return (
    <ThemeProvider
      theme={{
        components: {
          MuiUseMediaQuery: {
            // Change the default options of useMediaQuery
            defaultProps: { ssrMatchMedia },
          },
        },
      }}
    >
      <MyComponent />
    </ThemeProvider>
  );
}