34 lines
789 B
JavaScript
34 lines
789 B
JavaScript
|
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>
|
||
|
|
);
|
||
|
|
}
|