My CSS styling was originally like this
const Root = styled.div`
display: flex;
flex-direction: row;
margin: 0 auto;
width: 100%;
position: relative;
@media (min-width: ${(p) => p.theme.screen.md}) {
width: ${(p) => p.theme.screen.md};
// p.theme.screen.md is 1007px
}
@media (min-width: ${(p) => parseInt(p.theme.screen.lg, 10) + 20 + 'px'}) {
width: ${(p) => p.theme.screen.lg};
// p.theme.screen.lg is 1100px
}
`;
I am trying to convert this to Material UI makeStyles CSS and have made some progress:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
flexDirection: 'row',
margin: '0 auto',
padding: '20px',
width: '100%',
position: 'relative',
},
}));
I'm having trouble understanding how to replicate those @media queries (mixins) in Material UI. Can someone please provide guidance? (Please avoid sharing documentation links as I've already reviewed them and couldn't grasp the concept)