株式会社ユニフェイスの大竹です。
製造実行システムIB-MesのWebアプリ版・IB-Mes SaaSのフロントエンドを担当しています。
IB-Mes SaaSではReact,TypescriptとMaterial UIを使っているのですが、毎回JS in CSSの書き方に詰まってしまうので、まとめました
以下の内容を読んで、
- わかること:JS in CSSを利用したCSSの書き方
- わからないこと:上記以外の時のCSSの書き方
記事を書いているときの各種ツールのバージョンは、Material UI v4、React 17.0.2です
React 16.8で追加されたフック(Hook)を利用しています
グローバルにCSSを当てる
グローバルにCSSを当てるときは、’@global’を使います
以下の例では、MuiPickersSlideTransition-transitionContainerというクラスに、グローバルにCSSを適用しています
参考:https://stackoverflow.com/questions/58755118/global-styles-with-react-and-material-ui
const useStyles = makeStyles((theme) => ({
"@global": {
".MuiPickersSlideTransition-transitionContainer.MuiPickersCalendarHeader-transitionContainer":
{
order: -1,
},
".MuiTypography-root.MuiTypography-body1.MuiTypography-alignCenter": {
fontWeight: "bold",
},
},
}))
子要素を指定してスタイルを当てる
ol(番号付き箇条書き)の先頭を(1)のようなカッコつきの表記にするCSSで説明します
olの子要素のliを指定する時は、ol:{}の中に”& li”:{}を入れます
疑似要素を指定する時は、”&::before”のように書きます
カッコつきの表記にするポイントは、contentに`"(" counter(cnt) ") "`
を指定することです
参考:https://www.websuccess.jp/blog/archives/2711/
の技 調整する①の内容をJS in CSSに書き換えました
const useStyles = makeStyles((theme: Theme) =>
createStyles({
ol: {
paddingLeft: 0,
marginLeft: theme.spacing(4),
"& li": {
listStyleType: "none",
counterIncrement: "cnt",
display: "block",
position: "relative",
"&::before": {
content: `"(" counter(cnt) ") "`,
marginLeft: -theme.spacing(4),
width: theme.spacing(5),
position: "absolute",
top: 0,
left: 0,
},
},
},
})
)
スタイルを当てる部分では以下のように指定します
const classes = useStyles()
<ol className={classes.ol}>
<li>hoge</li>
<li>bra</li>
</ol>
直下の階層の子要素を指定する
直下の階層の子要素を指定する時は、子セレクタ > を利用することができます
const classes = makeStyles((theme: Theme) =>
createStyles({
editButton: {
flexGrow: 1,
textAlign: "center",
"& > *": {
margin: theme.spacing(1),
},
},
})
)
疑似クラスの指定
疑似クラスの指定は、:(セミコロン1個)を利用します
例えばホバー時の処理を書く場合は、”&:hover”となります
以下のように指定すると、マウスカーソルを載せた時だけ背景の色が変わります。
const useStyles = makeStyles((theme: Theme) =>
createStyles({
icon: {
"&:hover": {
background: theme.palette.action.active,
},
},
})
)
もし間違いなどありましたら、ご指導ご鞭撻のほどよろしくお願いします
ReactとMaterial UIなどについて勉強中なので、お手柔らかにお願いします