스타일 설정하기

• reset css
• palette 설정
• font 설정
• 기본 mui스타일 변경하기

---

1. reset css

공식문서

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}

각 브라우저 마다 기본 디폴트 스타일은 가지고 있다.
동일한 css스타일로 보여주기 위해서는 디폴트 값을 초기화를 시켜줘야한다.

---

2. css base 설정

    components: {
        MuiCssBaseline: {
            styleOverrides: {
                "*": {
                    boxSizing: "border-box",
                    margin: 0,
                    padding: 0
                },
                html: {
                    height: "100%",
                    width: "100%"
                },
                body: {
                    height: "100%",
                    width: "100%"
                },
                "#root": {
                    height: "100%",
                    width: "100%"
                }
            }
        }
    }

안에 자식 엘리먼트가 있던 없던 기본적인 크기를 전체 화면으로 하기 위해 설정을 해주고 있음

---

3. palett 설정하기

공식문서

import { createTheme } from '@mui/material/styles';
import { green, purple } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});

자주 사용하는 컬러들을 palette로 설정을 해주고 있음

4. font 설정

공식문서

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
    palette: {
        primary: {
            main: "#161616"
        },
        secondary: {
            main: "#EEFD53"
        },
        error: {
            main: "#DA1E28"
        }
    },
    typography: {
        fontFamily: ["Noto Sans KR", "sans-serif", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue"].join(",")
    }
});

export default theme;

기본적인 폰트 설정을 해주고 있음

---

설정 스타일 반영하기

공식문서

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@mui/material/CssBaseline";

import { ThemeProvider } from "@mui/material/styles";
import theme from "styles/theme";

import App from "./App";

ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <App />
        </ThemeProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

설정한 theme을 코드에 반영하기 위해서 필요한 설정

---

기본 mui스타일 변경하기

mui에서 제공해주는 컴포넌트들은 기본적인 스타일을 가지고있다.
이 스타일을 공통적으로 바꾸기 위해서 설정을 해줘야한다.

const theme = createTheme({
  components: {
            MuiTablePagination: {
            styleOverrides: {
                root: {
                    margin: "0 20px",
                    borderRadius: 4,
                    "&:last-child": {
                        padding: "20px 0"
                    }
                },
                spacer: {
                    flex: "1 1 100%"
                }
            }
        },
    },
  },
});