[Material Design] Material-UI(MUI) <palette colors 커스텀해서 색 추가하기>

💻 My Work/🎨 Material Design

[Material Design] Material-UI(MUI) <palette colors 커스텀해서 색 추가하기>

Jaeseo Kim 2023. 1. 16. 21:59

default theme

default theme에서 palette를 보자면 아래와 같습니다.

Default theme - Material UI

Here's what the theme object looks like with the default values.

mui.com

Palette 커스텀

Palette - Material UI

The palette enables you to modify the color of the components to suit your brand.

mui.com

저는 아래와 같이 myBlue 를 새로 정의해서 추가했습니다.

import {
  createTheme,
  ThemeProvider,
  responsiveFontSizes,
} from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

/**
 * 테마 정의
 * - 고유색, 글꼴 등
 */
let theme = createTheme({
  palette: {
    myBlue: {
      100: "#ECF2FF",
      200: "#E6EBF4",
    },
  },
});

✨ 아래 글을 참고하여 커스텀한 theme를 적용시킵니다.

[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <기본 theme를 커스터마이징하기>

https://mui.com/material-ui/customization/theming/ Theming - Material UI Customize MUI with your theme. You can change the colors, the typography and much more. mui.com theme를 정의하면, 컴포넌트를 만들 때마다 일일이 색이나 폰트 등

avoc-o-d.tistory.com

그럼 아래와 같이 접근 가능합니다!!

    <Button variant="contained" sx={{ backgroundColor: "myBlue.200" }}>
      예시
    </Button>

🚀🚀

'💻 My Work > 🎨 Material Design' 카테고리의 다른 글

[Material Design] Material-UI(MUI) <줄바꿈, white-space : "pre-wrap" 속성> (0)	2023.01.15
[Material Design] Material-UI(MUI) <글자 수 넘어가면 말줄임표 / 원하는 만큼의 줄만 보이게 하기> (0)	2023.01.14
[Material Design] Material-UI(MUI) : Styled Component Using the theme (0)	2022.12.13
[Material Design] Material-UI(MUI) : Overriding nested component styles - CardContent padding customize (0)	2022.12.01
[Material Design] Material-UI(MUI) : Masonry, Grid (컴포넌트 나열하기, 가로로 나란히 놓기) (0)	2022.11.09

현재글[Material Design] Material-UI(MUI) <palette colors 커스텀해서 색 추가하기>

jaeserrr.log