[Material-UI 실습] 6. Style (3)

Material-UI에서 제공하는 컴포넌트를 이용할 때 색을 설정하는 방법은 여러 가지가 있다.

 

1. 인라인 스타일을 이용 하는 방법

가장 쉽게 적용하는 방법으로 태그 내부에 스타일 속성을 이용하여 색을 설정.

 

2. .css 파일을 이용하는 방법

.css 파일에서 특정 클래스에 스타일이 적용되도록 작성하고 태그에서 해당 스타일이 적용되도록 클래스를 설정.

 

3. Material-UI의 withStyle을 이용하는 방법

이전 글에서 설명하였음.

https://jongbeom-dev.tistory.com/31

[Material-UI 실습] 4. Style (1) - withStyles

 

4. Material-UI의 theme을 이용하는 방법

이전 글에서 설명하였음.

https://jongbeom-dev.tistory.com/32

[Material-UI 실습] 5. Style (2) - theme

 

5. Material-UI의 Palette를 이용하는 방법

 

첫 번째 방법과 두 번째 방법은 흔한 방법이고 세 번째 방법과 네 번째 방법은 이전 글에서 설명하였으므로 다섯 번째 방법을 설명하겠다. 첫 번째 방법부터 네 번째 방법은 색뿐만 아니라 컴포넌트의 스타일을 설정하는 방법이지만 Palette를 이용하는 방법은 컴포넌트의 색만 설정한다.

 

Material-UI에서 컴포넌트의 색을 지정할 때 color, bgcolor와 같은 속성에 미리 지정된 색을 글자에 대응시키고 대응된 글자를 속성에 설정하여 색을 설정한다. 기본적으로 설정된 색은 다음과 같다.

 

primary.light, primary.main, primary.dark, primary.contrastText, secondary.light, secondary.main, secondary.dark, secondary.contrastText, error.light, error.main, error.dark, error.contrastText

 

이를 실제 코드에 적용해보면 다음과 같다.

 

StyleTutorial3.js

import React, { Component } from 'react';
import Box from '@material-ui/core/Box';
class StyleTutorial3 extends Component {
  render() {
    return (
      <div>
        <Box bgcolor="primary.main" p={2} m={1}>primary.main</Box>
        <Box bgcolor="primary.light" color="primary.contrastText"p={2} m={1}>primary.light</Box>
        <Box bgcolor="primary.dark" color="primary.contrastText"p={2} m={1}>primary.dark</Box>
        <Box bgcolor="secondary.main" p={2} m={1}>secondary.main</Box>
        <Box bgcolor="secondary.light" color="secondary.contrastText"p={2} m={1}>secondary.light</Box>
        <Box bgcolor="secondary.dark" color="secondary.contrastText"p={2} m={1}>secondary.dark</Box>
        <Box bgcolor="error.main" p={2} m={1}>error.main</Box>
        <Box bgcolor="error.light" color="error.contrastText"p={2} m={1}>error.light</Box>
        <Box bgcolor="error.dark" color="error.contrastText"p={2} m={1}>error.dark</Box>
        <Box bgcolor="text.primary" p={2} m={1}>text.primary</Box>
        <Box bgcolor="text.secondary" p={2} m={1}>text.secondary</Box>
        <Box bgcolor="text.disabled" p={2} m={1}>text.disabled</Box>
        <Box bgcolor="text.hint" p={2} m={1}>text.hint</Box>
        <Box bgcolor="text.myTextColor" p={2} m={1}>text.myTextColor</Box>
      </div>
    );
  }
}
export default StyleTutorial3;

 

화면 결과는 다음과 같다.

 

색을 설정한 Box 컴포넌트

이와 같이 bgcolor (배경색 속성), color(글자색 속성)에 이미 정의된 글자를 설정하여 컴포넌트의 색을 설정한다. 위의 색은 Material-UI에서 기본적으로 설정한 색이다. 큰 노력 없이 어플리케이션에의 색을 전체적으로 통일시키고 자연스러운 색감을 유지하도록 돕기 위해서 제공하는 기능이다.

 

만약 다른 색을 선택하고 싶다면 Palette값을 변경하면된다. Palette는 Material Design에 따라 Material-UI에서 제공하는 색의 모음이다. 기본적으로 Palette값에는 primary.light, primary.main, primary.dark, primary.contrastText, secondary.light, secondary.main, secondary.dark, secondary.contrastText, error.light, error.main,error.darkerror.light, error.main, error.dark, error.contrastText 속성이 존재한다. Palette값은 다음과 같이 직접 지정한다.

 

 

StyleTutorial3.js

import React, { Component } from 'react';
import Box from '@material-ui/core/Box';
import {createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#f44336'
    },
    secondary: {
      main: '#3f51b5'
    },
    error: {
      main: '#009688'
    },
    text: {
      primary: '#e91e63',
      secondary: '#2196f3',
      disabled: '#4caf50',
      hint: '#ffc107',
      myTextColor : '#039be5'
    }
  },
})
class StyleTutorial3 extends Component {
  render() {
    return (
      <ThemeProvider theme={theme} style ={{padding:'20px'}}>
        <Box bgcolor="primary.main" p={2} m={1}>primary.main</Box>
        <Box bgcolor="primary.light" color="primary.contrastText"p={2} m={1}>primary.light</Box>
        <Box bgcolor="primary.dark" color="primary.contrastText"p={2} m={1}>primary.dark</Box>
        <Box bgcolor="secondary.main" p={2} m={1}>secondary.main</Box>
        <Box bgcolor="secondary.light" color="secondary.contrastText"p={2} m={1}>secondary.light</Box>
        <Box bgcolor="secondary.dark" color="secondary.contrastText"p={2} m={1}>secondary.dark</Box>
        <Box bgcolor="error.main" p={2} m={1}>error.main</Box>
        <Box bgcolor="error.light" color="error.contrastText"p={2} m={1}>error.light</Box>
        <Box bgcolor="error.dark" color="error.contrastText"p={2} m={1}>error.dark</Box>
        <Box bgcolor="text.primary" p={2} m={1}>text.primary</Box>
        <Box bgcolor="text.secondary" p={2} m={1}>text.secondary</Box>
        <Box bgcolor="text.disabled" p={2} m={1}>text.disabled</Box>
        <Box bgcolor="text.hint" p={2} m={1}>text.hint</Box>
        <Box bgcolor="text.myTextColor" p={2} m={1}>text.myTextColor</Box>
      </ThemeProvider>
    );
  }
}
export default StyleTutorial3;

 

화면 결과는 다음과 같다.

 

수정된 Palette값으로 설정한 Box 컴포넌트

 

이와 같이 컴포넌트 내에서 수정하지 않고 theme의 Palette의 값을 수정하여 Palette에서 글자에 대응된 색을 변경한다. primary, secondary, error의 경우 light, dark, main, contrastText의 값을 수정하지 않고 main의 값만 수정하였다. Palette에서 main을 설정하면 설정되지 않은 다른 색은 자동으로 계산된 값을 설정한다. 밑의 링크에 접속하면 특정 색을 Main으로 설정할 때 다른 색은 어떻게 설정되는지 확인 가능하다 (확인하지 못했지만 아마 Material Design의 색 규칙을 따랐을 것이다).

 

https://material.io/resources/color/#!/?view.left=0&view.right=0

Color Tool - Material Design

 

myTextColor라는 임의의 색을 지정하고 적용을 해보았는데 이 역시 가능함을 확인하였다. 여기까지로 Material-UI의 Style 공부를 마무리하겠다.

 

이에 대한 설명은 다음을 참고하였다.

https://material-ui.com/customization/palette/#palette

Palette - Material-UI

https://material-ui.com/customization/color/

Color - Material-UI

https://material-ui.com/system/palette/

Palette - Material-UI

예제 확인

https://jb-material-ui-tutorial.herokuapp.com/

Material UI Tutorial