Material-uiのmakestyleにて、複数のクラスを動的に指定する方法
2019-10-14 |
2020-5-14 |
1 min read
この記事は、1年間更新されておりません。
TL;DR
- class データを string 配列として持つ
配列.join(' ')を該当のclassName={}の中に記述する
概要
最近、React についての勉強を行っていたところ、classの指定に手間取ってしまったのでメモ。
方法としては、探したところ、以下 2 つがあるみたい。
- class 名の配列を作成して、最後に join で配列の間に``を入れて出力
classNameの中で、２つの class 名を呼び出す。
汎用性があるのは方法 1 のほうだと思われます。
面倒くさいのでソースベタ貼りしてます。
BoxはMaterial-uiの Util-component です。
最後に各クラスを join でくっつける方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| return (
<Box
display="flex"
alignItems="center"
justifyContent="center"
className={classes.block}
>
{(() => {
const discClass: string[] = [classes.disc];
if (props.discStatus === DiscStatus.White) {
discClass.push(classes.discWhite);
} else if (props.discStatus === DiscStatus.Black) {
discClass.push(classes.discBlack);
}
return (
<Box
component="div"
onClick={handleOnClickDisc}
className={discClass.join(' ')}
></Box>
);
})()}
</Box>
);
|
className に２つの class 名を直接入れる方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| return (
<Box
display="flex"
alignItems="center"
justifyContent="center"
className={classes.block}
>
{(() => {
if (props.discStatus === DiscStatus.White) {
return (
<Box
component="div"
className={`${classes.disc} ${classes.discWhite}`}
></Box>
);
} else if (props.discStatus === DiscStatus.Black) {
return (
<Box
component="div"
className={`${classes.disc} ${classes.discBlack}`}
></Box>
);
} else if (props.discStatus === DiscStatus.Empty) {
return <Box component="div" className={classes.disc}></Box>;
}
})()}
</Box>
);
|
参考
https://material-ui.com/styles/basics/
