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);参考資料
こちらが参考資料になります。
まとめ
今回は、Material-UIでCSSにnth-of-typeやhoverなどを使用する方法について掲載しました！
CSS-in-JSを採用しているMaterial-UIを使うと、styled-componentsなどと同じように多くの利点があります！
今回のように、色々とわからないことも出てきますが、慣れるとCSS-in-JSめちゃくちゃ良いので、是非使っていきたいですね！
コメント