반응형
참고 : 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>
);
}
반응형
'[====== Development ======] > React' 카테고리의 다른 글
부모 컴포넌트에서 자식 컴포넌트 함수 사용하기 ( useImperativeHandle, forwardRef ) (0) | 2022.08.21 |
---|---|
CSS Flex에 대한 설명 (0) | 2022.08.14 |
React Styled component (0) | 2022.08.10 |
[Meterial UI] Stack , Button (0) | 2022.08.10 |
component를 array로 정의 (0) | 2022.08.10 |