Material-UI 테마 구성

테마를 사용하면 응용 프로그램 전체에서 일관된 디자인을 설정할 수 있으며 비즈니스 또는 브랜드의 디자인 요구 사항을 충족하는 데 도움이 됩니다.
Material-UI에는 사용자 정의할 수 있는 기본 테마가 있습니다. React 앱에서 밝고 어두운 테마를 위해 Material-UI를 구성하는 방법을 보여드리겠습니다.

먼저 반응 앱의 루트 폴더에 다음 문장과 함께 재료 UI 및 재료 UI 아이콘을 설치해야 합니다.

npm install @material-ui/core

npm install @material-ui/icons 

Roboto 글꼴을 사용하려면 index.html에 다음 줄을 추가해야 합니다.

<link rel="stylesheet" 
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> 

테마 구성

기본 테마 구성here을 볼 수 있으며 테마 개체에는 변경할 수 있는 모든 속성이 포함되어 있습니다.

src 폴더에 theme.js 파일을 추가하고 내 src 폴더와 theme.js 파일 안에 새 폴더 테마를 만들고 팔레트 및 타이포그래피 속성을 덮어씁니다.

createMuiTheme를 사용하여 새 값으로 기본 구성을 재정의하는 새 테마를 만듭니다.

팔레트

Palette 개체에는 재료 UI 구성 요소의 색상이 포함되어 있으며 응용 프로그램에 대한 모드 ligth 또는 dark(유형 속성)를 정의할 수 있습니다.
재료 설계 지침에 따라 material ui palettes을 사용하거나 자체 밴드 팔레트를 개발할 수 있습니다.

타이포그래피

글꼴 모음과 크기를 변경할 수 있습니다.

import { createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import blue from '@material-ui/core/colors/blue';

const theme = createMuiTheme({
  palette: {
    type: "ligth",  
    primary: {
      main: indigo[900],
    },
    secondary: {
      main: blue[300],
    },
  },
  typography: {   
    fontFamily:'Roboto',
    fontSize: 14,    
  },
});
export default theme; 

테마가 구성되면 ThemeProvider 구성 요소를 사용하여 테마를 전체 애플리케이션에 적용합니다. 이를 위해 index.js에 테마를 추가합니다. 다크 모드를 사용하려면 앱을 Paper 구성 요소에 포함해야 합니다. 그렇지 않으면 화면에서 다크 모드를 볼 수 없습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme/theme';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Paper style={{height:"100vh", width:"100vw", }}>
      <App />
    </Paper>
  </ThemeProvider>,
  document.getElementById('root')
);

이제 AppBar, Buttons 및 Inputs 구성 요소를 추가하면 테마 사양에 따라 테마 색상을 볼 수 있습니다. 예를 들면 다음과 같습니다.

<Button variant="contained" color="primary">
  Primary  
</Button>

<Button variant="contained" color="secondary">
  Secondary  
</Button>

<Button variant="contained" >
  Default  
</Button>

코드here를 볼 수 있습니다.