【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独自の書き方なので知らないと地味にわからないところでした。参考ページは下記。

How to style child element that depends on parent ? · Issue #330 · styled-components/styled-components
I have my component of table like this <Table className="table"> <Thead> <Tr> <Th>ID</Th> <Th>Name</Th> <...

未経験、異業種からIT業界に転身。フロントエンジニア。主にJavascript(React.js)をつかったWEBアプリ開発にたずさわる。
お仕事のご依頼はこちらから → genpsp10@gmail.com

psp7をフォロー
プログラミング
スポンサーリンク
psp7をフォロー
ハトらぼ

コメント