005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
27 lines
665 B
JavaScript
27 lines
665 B
JavaScript
import { styled } from '@mui/material/styles';
|
|
import Typography from '@mui/material/Typography';
|
|
import { red, green, blue } from '@mui/material/colors';
|
|
|
|
const Root = styled('div')(({ theme }) => ({
|
|
padding: theme.spacing(1),
|
|
[theme.breakpoints.down('md')]: {
|
|
backgroundColor: red[500],
|
|
},
|
|
[theme.breakpoints.up('md')]: {
|
|
backgroundColor: blue[500],
|
|
},
|
|
[theme.breakpoints.up('lg')]: {
|
|
backgroundColor: green[500],
|
|
},
|
|
}));
|
|
|
|
export default function MediaQuery() {
|
|
return (
|
|
<Root>
|
|
<Typography>down(md): red</Typography>
|
|
<Typography>up(md): blue</Typography>
|
|
<Typography>up(lg): green</Typography>
|
|
</Root>
|
|
);
|
|
}
|