Material-ui : breakpoint

wjdym·2020년 6월 7일
0

material-ui

목록 보기
2/2

기본 Breakpoint

Material-ui에는 화면 크기에 따라 Breakpoint가 있다.

xs | sm | md | lg | xl

xs (extra-small) : 0px ~ 600px
sm (small) : 600px ~ 960px
md (medium): 960px ~ 1280px
lg (large) : 1280px ~ 1920px
xl (extra-large) : 1920px ~

내가 breakpoint를 바꿀 수 있다

Breakpoint 설정하기

1. 'createMuiTheme', 'MuiThemeProvider' import하기

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";

2. breakpoint 설정하기

const theme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 360,
      md: 768,
      lg: 1200,
    },
  },
});

위는 xs를 360~766, md를 768~1199, lg를 1200~ 로 설정한 예시다.

하지만 슬프게도 여기까지 해도 내가 설정한 breackpoint가 적용되는 게 아니다.

3. <MuiThemeProvider theme={theme}>로 최상위 감싸기

return (
    <MuiThemeProvider theme={theme}>
        <div></div>
    </MuiThemeProvider>
profile
에러 타파!

0개의 댓글