[Material UI] Style Basic

신속한 개발을 위해 여러가지 UI기능을 제공하고 있는 Material UI Library를 소개하려한다. 이전에 다룬적이 있지만 원하는 형태로 커스텀을 하기위해 찾아본 결과 여러가지 방법이 존재했고 새롭게 알게된 내용들을 추가적으로 적어 보려고 한다.

• 사용하고자 하는 기능을 제공하는 Material UI component를 import 한다.
• component를 삽입하고 지원하는 API를 통해 원하는 형태로 사용한다.

[Hooks API] makeStyles

React의 Hooks처럼 classes객체를 만들어 사용할 수 있도록 도와준다.

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

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

[Styled Component API] styled

이전에 프로젝트를 진행하면서 사용했던 방식으로 조금 다른 형태로의 작성이 필요하다.

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

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

export default function StyledComponents() {
  return <MyButton>Styled Components</MyButton>;
}

[HOC API] withStyles

withStyles를 사용한 HOC형태로의 스타일링도 가능하다.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

[Conditional Rendering] Props

parent component에서 props를 받아 상태에 따른 조건 스타일링도 가능하다.

const useStyles = makeStyles({
  // style rule
  foo: props => ({
    backgroundColor: props.backgroundColor,
  }),
  bar: {
    // CSS property
    color: props => props.color,
  },
});

function MyComponent() {
  // Simulated props for the purpose of the example
  const props = { backgroundColor: 'black', color: 'white' };
  // Pass the props as the first argument of useStyles()
  const classes = useStyles(props);

  return <div className={`${classes.foo} ${classes.bar}`} />
}

Material UI에서 제공하는 기본 color(primary, secondary) 변경이나 제작하는 어플리케이션의 테마. 즉, 전체적인 스타일을 주입하는 방식은 다음 글에 정리하겠다.