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

Material-UIのCSSでnth-of-typeやhoverなどを使用したい
サンプルコード
参考資料
まとめ

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

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

サンプルコード

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

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-UIのExpansionPanelのサンプルです！

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