【React】Material-UIのCSSでnth-of-typeやhoverなどを使用したい時

React

Material-UIのCSSでnth-of-typeやhoverなどを使用したい

ReactでMaterial-UIを使用してCSSを書いていると、makeStyleswithStylesを使ってnth-of-typehoverってどうやって書くんだろう?って時があったので、備忘録として記録しておきます。

サンプルコード

実際にサンプルコードを見ながら、書き方を確認していきましょう!

nth-of-typeの例

nth-of-typeの例になります!

やり方としては簡単で、対象のセレクタ部分にネストして、文字列として指定すればOKです!

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    chartLi: {
      'nth-of-type(1)': {
        animationDelay: '0.7s',
      },
      'nth-of-type(2)': {
        animationDelay: '0.9s',
      },
      ...
    },
  }),
);

hoverの例

こちらはhoverの例になります!

こちらも同様に、対象セレクタ部分にネストし、文字列として指定すればOKです!

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    tr: {
      background: "#f1f1f1",
      '&:hover': {
         background: "#f00",
      },
    },
    ...
  }),
);

その他の例

こちらは、Material-UIExpansionPanelのサンプルです!

const ExpansionPanel = withStyles({
  root: {
    border: '1px solid rgba(0, 0, 0, .125)',
    boxShadow: 'none',
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiExpansionPanel);

参考資料

こちらが参考資料になります。

まとめ

今回は、Material-UIでCSSにnth-of-typehoverなどを使用する方法について掲載しました!

CSS-in-JSを採用しているMaterial-UIを使うと、styled-componentsなどと同じように多くの利点があります!

今回のように、色々とわからないことも出てきますが、慣れるとCSS-in-JSめちゃくちゃ良いので、是非使っていきたいですね!

オススメの関連商品

Note一覧

コメント