material-ui, CSS Baseline api

CSS Baseline api

 

브라우저마다 각기 다른 기본값을 통일하여

일관된 모양을 표현하기 위해 사용하는 base css코드의 모음으로

nomalize.css, reset.css와 같은 역할을 합니다.

 

css baseline(global style)을 수정하려면

next.js 에서는 src/theme.js에서

theme instance를 생성해주는 부분

( createMuiTheme클래스의 인자 중 overides 부분)

을 수정해줍니다.

 

아래 링크는, material-ui에서 제공하는 서버사이드 랜더링(next.js) 예시입니다.

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

// Create a theme instance.
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#556cd6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  },
  typography: {
    fontFamily: "Raleway, Arial",
  },
  overrides: {
     MuiCssBaseline: {
      "@global": {
        "@font-face": [raleway],
        html: {
          height: "100%",
        },
        body: {
          height: "100%",
        },
      },
    },
  },
});