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

Material-UI 스타일 패키지를 이용해서 스타일을 적용할 때 Theming을 사용하는 방법도 있다. Thme은 제작하는 어플리케이션의 전체적인 테마를 의미한다. 각 테마에 맞게 theme을 설정하며 아무 설정이 없다면 default theme을 사용한다. 이전의 withStyles는 컴포넌트의 스타일을 적용하는데 사용하고, theme은 어플리케이션의 전체적인 스타일을 적용하는데 사용한다. 이전과 같은 예제 화면이지만 theme을 이용하여 구현하도록 코드를 작성하였다. theme은 StyleTutorial2.js에서 설정하였고 이를 StyleTutorial2Inner.js에서 받아 스타일을 적용하도록 구현하였다.

 

StyleTutorial2.js

import React, { Component } from 'react';
import StyleTutorial2Inner from './StyleTutorial2Inner';
import {createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createMuiTheme({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
})
class StyleTutorial2 extends Component {
  render() {
    return (
      <ThemeProvider theme={theme} style ={{padding:'20px'}}>
        <StyleTutorial2Inner/>
      </ThemeProvider>
    );
  } 
}
export default StyleTutorial2;

 

StyleTutorial2Inner.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button'
import { withStyles} from '@material-ui/styles';

const styles = theme =>({
  root: {
    background: theme.background,
    border: 0,
    borderRadius: 3,
    boxShadow: theme.boxShadow,
    color: 'white',
    height: 48,
    padding: '0 30px',
    margin : '10px'
  },
});
class StyleTutorial2 extends Component {
  render() {
    const {classes} = this.props;
    return (
      <div>
        <Button className={classes.root}>Button with Style</Button>
        <Button className={this.props.classes.root}>Button with Style</Button>
      </div>
    );
  }
}
export default  withStyles(styles)(StyleTutorial2);

 화면 결과는 다음과 같다.

 

Theme, withStyles을 이용하여 스타일을 적용한 Button 컴포넌트

 

StyleTutorial2.js에서는 createMuiTheme 메소드를 이용하여 theme을 정의한다. createMuiTheme 메소드는 스타일 정보를 받아 theme 객체를 반환한다.

 

생성한 theme 객체는 ThemeProvider 컴포넌트에서 theme이라는 속성에 설정한다. 이 컴포넌트에 theme 속성을 설정하면 내부의 모든 컴포넌트에서 Material-UI 컴포넌트의 스타일을 설정할 때 theme을 이용할 수 있다. 따라서 전체적인 프로젝트 스타일의 통일성을 유지한다.

 

StyleTutorial2Inner.js에서는 스타일을 withStyles을 이용하여 설정한다. 이전과 달리 Main.js에서 theme 객체를 받았으므로 style를 함수로 정의하고 theme를 인자로 받는다. theme 객체에서는 background와  boxShadow를 설정하였으므로 다음과 같이 theme에서 값을 받아온다. 이렇게 withStyles와 theme 개념을 이용하면 공통적인 스타일과 컴포넌트 내부의 스타일을 통일성 있게 적용가능하다.

 

이에 관한 내용은 다음을 참고하였다.

https://material-ui.com/styles/advanced/

Advanced - Material-UI

https://material-ui.com/styles/api/

API - Material-UI

예제 확인

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

Material UI Tutorial