반응형

참고 : https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query

import { styled } from '@mui/material/styles';

// screen width가 lg(large: 1200px) 보다 크면 width에 280 적용
const DRAWER_WIDTH = 280;
const RootStyle = styled('div')(({ theme }) => ({
  [theme.breakpoints.up('lg')]: {
    flexShrink: 0,
    width: DRAWER_WIDTH,
  },
}));

fuction SidebarComponent(){
  return (
    <RootStyle>
    ....
    </RootStyle>
  );
}

 

반응형

+ Recent posts