MUI component의 스타일 쉽게 설정해주기

MUI 에서 지원하는 styled을 사용한다.

원래 사용하던 Styled-Component 처럼 많은 이점이 있는데,
1. 컴포넌트의 이름을 새로 지정할 수 있고 , Style Override를 지원 해준다.

2. 편한 조건부 스타일링이 가능해진다. (Ex: createTheme)

 

우선 @mui/system 혹은 @mui/material 에서 import 해온다.

 

import * as React from 'react';
import { styled } from '@mui/system';

const MyComponent = styled('div')({
  color: 'darkslategray',
  backgroundColor: 'aliceblue',
  padding: 8,
  borderRadius: 4,
});

export default function BasicUsage() {
  return <MyComponent>Styled div</MyComponent>;
}

만약 조건부 스타일링을 하고 싶다면, theme을 만들어준다.

 

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

const theme = createTheme({
    palette: {
        primary: {
            main: "#161616"
        },
        secondary: {
            main: "#EEFD53"
        },
        error: {
            main: "#DA1E28"
        }
    },
});

export default theme;

그 후 App 최상단에서 ThemeProvider로 감싸준다. (CssBaseLine으로 디폴트 스타일 초기화 해준다.)

 

<ThemeProvider theme={theme}>
            <CssBaseline />
            <App />
        </ThemeProvider>

 

사용 예시)

 

export const PublishedTitle = styled(Box)(({ theme }) => ({
color: "#385b66",
backgroundColor: theme.palette.neutral[5],
}));

이렇게 하면 조건부 스타일링도 편하게 할 수 있다!

 

 

const lightTheme = createMuiTheme({
  palette: {
    type: 'light',
  },
});

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      {/* Your Material-UI components go here */}
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Dark Mode
      </button>
    </ThemeProvider>
  );
}

export default App;

이런식으로 쉽게 다크모드 설정 변경이 가능한 것

 

ps : 참고로 theme 은 가장 최근에 선언한 theme의 정보로 받아와준다