MUI에서 적용되는 CSS customize 방법들

 

MUI 에서는 기본적으로 여러 컴포넌트를 제공해주는데, 내 프로젝트에서는 추가적으로 customize를 해야한다! 색, 크기 등! 

 

 

---

 

Material UI Components 를customize 하기 위한 방법들!

MUI에서는 Emotion을 기반으로 한 style 기법을 사용한다. css 관련한 sx, theme 등 모두 emotion 엔진 위에서 돌아간다. 

 

Emotion CSS 란? 

CSS-in-JS 로, .css 파일을 따로 만들어서 css를 적용하는 것이 아닌, js 파일 안에서 style을 적용할 수 있게 하는 라이브러리이다.

 

여기서 Emotion CSS랑 내가 알고 있던 styled-component, Tailwind CSS의 차이가 궁금해졌다. 다음에.. 

 

출처: 

https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop

How to customize - Material UI

 

---

1. One-off customization

To change the styles of one single instance of a component, you can use one of the following options:

 

이 말은.. 컴포넌트의 단일 속성만 바꾸고 싶을 땐 아래와 같은 방법들을 사용하면 된다! 

 

1. sx props

sx prop은 스타일을 추가하거나 override하는 데 가장 적합한 옵션이다.

<Slider defaultValue={30} sx={{ width: 300, color: 'success.main' }} />

 

---

 

Overriding nested component styles

 

MUI에서 제공하는 컴포넌트의 특정 부분의 style을 바꾸는 법! 

 

 

 [hash]-Mui[Component name]-[name of the slot] 

MUI 에서는 이런 식으로 classname을 지정한다.

 

f11 개발자 도구로 mui에서 사용한 classname 을 찾아서 sx에서 클래스의 style을 수정한다. 

  

 

---

 2. Global theme overrides

 

Themed components

모든 컴포넌트의 스타일 일관성을 위해 제공하는 기능

const theme = createTheme({
  components: {
    // Name of the component
    MuiButtonBase: {
      defaultProps: {
        // The props to change the default for.
        disableRipple: true, // No more ripple, on the whole application 💣!
      },
    },
  },
});

 

그리고 이렇게 적용해줘야 함

<ThemeProvider theme={theme}>
  <Button>This button has disabled ripples.</Button>
</ThemeProvider>

 

---

3. Global CSS override

전역적으로 css를 관리하는 것이다! 

 

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    success: {
      main: '#ff0000',
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: (themeParam) => `
        h1 {
          color: ${themeParam.palette.success.main};
        }
      `,
    },
  },
});

export default function OverrideCallbackCssBaseline() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <h1>h1 element</h1>
    </ThemeProvider>
  );
}

 

이렇게 CssBaseline으로 브라우저 기본 스타일을 초기화해서 MUI의 전역 스타일을 설정해준다. 

위 코드에서 Global CSS는 <CssBaseline />를 통해 한 번에 주입한다. 

 

 

---

 

 

https://okky.kr/articles/1525940

React 에서 MUI 와 CSS 총정리 | OKKY