React使用Material UI makeStyles时div条件应用CSS样式不生效问题

核心错误 #

你没有正确调用Material UI makeStyles生成的useStyles钩子获取实际类名：

• makeStyles执行后返回的是自定义React钩子，必须在组件内部调用该钩子才能得到最终的CSS类名映射对象，直接硬写字符串'label1'、'label2'无法匹配MUI自动生成的带哈希后缀的类名，因此样式不会生效。

修复代码示例 #

// 组件内部首先调用useStyles钩子获取类名映射
const classes = useStyles();

// 渲染时使用classes对象下的属性，不要写硬编码字符串
<div className={parseInt(key) % 2 === 0 ? classes.label1 : classes.label2 }>
     <span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>

额外注意事项 #

• 你样式中定义的top属性默认不会生效，需要给对应div补充position: relative/position: absolute等非static的定位配置，static定位下偏移属性不生效。
• 如果你的key本身就是数值类型，可以省略parseInt转换，直接写key % 2 === 0即可，避免非数字字符串转换得到NaN的异常。

内容的提问来源于stack exchange，提问作者Ap-Mich