[React.js/Material-UI] 리액트에서 Material-UI 사용하기 - custom theme 적용

@material-ui에서 기본적으로 제공하는 default theme이 있다.
default theme은 typography나 컬러코드를 가진 palette 등 기본적으로 설정된 테 마셋을 요구사항에 따라 사용자가 커스텀하여 테마셋을 설정할 수도 있다!

 

1.  theme 파일 생성

theme.js 파일을 생성한 후  @material-ui/core에서 createTheme을 import한다
json 형태의 테마 값을 요구사항에 맞게 설정한다.

Default Theme - Material-UI

🔥예시🔥

import { createTheme } from "@material-ui/core/styles";

const CustomMuiTheme = createTheme({
  breakpoints: {
    keys: ["xs", "sm", "md", "lg", "xl"],
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
  palette: {
    primary: {
      main: "#04939d",
    },
  },
});
export default CustomMuiTheme;

 

2. theme 적용하기

최상위 컴포넌트인 App.js로 다시 돌아와서 앞서 생성한  theme을 import 한다
theme 적용을 위해 @material-ui/styles의 ThemeProvider도 import 한다.
ThemeProvider에 custom theme을 주입한다.
하위 컴포넌트에서도 잘 적용되는지 확인하기 위해 CustomButoon 컴포넌트를 하나 생성하여 import 했다.

App.js

import React from "react";
import { CssBaseline } from "@material-ui/core";
import CustomMuiTheme from "./theme";
import { ThemeProvider } from "@material-ui/styles";
import CustomButton from "./button";

const App = () => {
  return (
    <>
      <ThemeProvider theme={CustomMuiTheme}>
        <CssBaseline />
        <CustomButton />
      </ThemeProvider>
    </>
  );
};

export default App;

 

button.js

custom theme을 사용하기 위해 @material-ui/core에서 useTheme을 import 한다.
button에 custom으로 생성한 컬러 값을 배경색으로 넣어준다.

import React from "react";
import { useTheme } from "@material-ui/core";

const CustomButton = ({}) => {
  const theme = useTheme();
  return (
    <button style={{ background: theme.palette.primary.main }}>Click</button>
  );
};

export default CustomButton;

 

primary의 main값으로 #04939d를 선택했는데

내가 custom으로 설정한 값이 배경색에 입혀진 것을 확인할 수 있다.

App.js에서 ThemeProvider에 CustoMuiTheme을 주입하지 않으면
material-ui에서 기본으로 제공하는 default theme의 primary.main 값인 컬러 코드  #3f51b5가 배경색으로 입혀진다