Material UI - createStyles + makeStyles

MUI에서 제공하는 withStyles(HOC)로 함수 컴포넌트에 스타일링을 하려고 했으나 classes props가 전달되지 않았다. 공식문서를 보니 propType에 추가해줘야 할 게 있었다.

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);

요렇게 하면 된다.

근데 공식문서를 찾아보니 또 다른방법을 사용할 수 도 있다는 것을 알아냈다. 바로 createStyles와 makeStyles를 이용하는 것이다.

일단 코드부터.

import { makeStyles } from '@mui/styles';

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}`} />;
}

요런식으로 Hook 처럼 사용가능하다. useStyles에 props을 통과시켜 사용할 수 도 있다.

끝!