Material UI使用createStyles时伪类、滚动条样式不生效如何解决

你遇到的两个样式失效问题分别和Material UI底层依赖的JSS语法规则、CSS滚动条生效前提有关，修改方法如下： #

问题1：必填星号不显示 #

JSS中给伪元素的content赋值纯文本时，需要嵌套两层引号：外层是JS语法的字符串引号，内层是CSS识别的内容引号，否则最终渲染的CSS中content值没有包裹引号，无法识别为显示内容。

问题2：滚动条样式不生效 #

自定义滚动条样式生效的前提是容器设置了overflow属性（值为auto/scroll均可），且容器实际出现内容溢出的情况，否则滚动条本身不会渲染，对应样式自然不生效。 #

修改后的完整代码 #

import { createStyles, makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(() =>
  createStyles({
    label:{},
    mandatory: {
      "&::after":{
        // 嵌套引号，外层是JS字符串引号，内层是CSS需要的内容引号
        content: "' *'",
        color: "red",
      }
    },
    box:{
      width: "90px",
      height: "10px",
      margin: "5px auto",
      backgroundColor: "white",
      // 新增overflow配置，触发滚动条渲染
      overflow: "auto",
      "&::-webkit-scrollbar":{
        width:"3px",
      }
    },
  })
);
const classes = useStyles();

// 原有className写法无需修改
<label className={[classes.mandatory,classes.label].join(" ")}>

内容的提问来源于stack exchange，提问作者Kousalya