【React: Material-Ui】withStylesで子要素にCSSでスタイルを適用

withStyles子要素にスタイル適用

React: Material-Uiでは、要素にCSSを当てる方法としてwithStylesを使うやり方があります。

withStylesに渡すスタイルオブジェクトで、子要素を指定するためには下のように記述します。

import Button from '@material-ui/core/Button/index';
import { withStyles } from '@material-ui/core/styles/index';

const styles = {
  button: {
    width: '16px',
    height: '16px',
    '& > div': {
      color: 'red'
    },
  },
};

const ModButton = (props) => {
  const { classes } = props;

  return (
    <Button className={classes.button}>
      <div>OK</div>
    </Button>
  );
};

export default withStyles(styles)(ModButton);

SCSSと似たような感じで指定できますが、withStyles独自の書き方なので知らないと地味にわからないところでした。参考ページは下記。