Reactjs 覆盖所有变体的反应材料UI进度条颜色

我试图覆盖材质UI栏的颜色。我尝试的第一个解决方案（简化）如下

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/LinearProgress”导入LinearProgress；
const useStyles=makeStyles({
初级颜色：{
背景颜色：“f6ce95”
},
barColorPrimary：{
背景色：“f0ad4e”
},
dashedColorPrimary：{
背景图片：
“径向梯度（#f6ce95 0%，#f6ce95 16%，透明42%）”
}
});
导出默认函数LinearDeterminate（）{
const classes=useStyles（）；
返回(
);
}

除

缓冲区

变量外，上述所有变量均可正常工作

我尝试的第二个解决方案如下

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/LinearProgress”导入LinearProgress；
const useStyles=makeStyles({
根目录：{
“&.MuiLinearProgress colorPrimary”：{
背景颜色：“f6ce95”
},
“&.MuiLinearProgress barColorPrimary”：{
背景色：“f0ad4e”
},
“&.MUILinerProgress dashedColorPrimary”：{
背景图片：
“径向梯度（#f6ce95 0%，#f6ce95 16%，透明42%）”
}
},
});
导出默认函数LinearDeterminate（）{
const classes=useStyles（）；
返回(
);
}

上述方法适用于

缓冲区

变量，但不适用于任何其他变量

我将如何使所有变体与自定义颜色一起工作

---

我一直在这里使用这个小代码沙盒：

在第二个解决方案中，否定缓冲区的第一条规则：

：not（.MuiLinearProgress buffer）

。此外，缓冲区

.MuiLinearProgress colorPrimary

似乎是根后代-请参阅我的第二条规则

const useStyles = makeStyles({
  root: {
    height: "40px",
    "&.MuiLinearProgress-colorPrimary:not(.MuiLinearProgress-buffer)": {
      backgroundColor: "#f6ce95"
    },
    "& .MuiLinearProgress-colorPrimary": {
      backgroundColor: "#f6ce95"
    },
    "& .MuiLinearProgress-barColorPrimary": {
      backgroundColor: "#f0ad4e"
    },
    "& .MuiLinearProgress-dashedColorPrimary": {
      backgroundImage:
        "radial-gradient(#f6ce95 0%, #f6ce95 16%, transparent 42%)"
    }
  }
});

<LinearProgress
    variant="determinate"
    color="primary"
    valueBuffer={40}
    value={20}
    classes={{
      root: classes.root
    }}
/>

const useStyles=makeStyles({
根目录：{
高度：“40px”，
“&.MuiLinearProgress colorPrimary:不是（.MuiLinearProgress缓冲区）”：{
背景颜色：“f6ce95”
},
“&.MuiLinearProgress colorPrimary”：{
背景颜色：“f6ce95”
},
“&.MuiLinearProgress barColorPrimary”：{
背景色：“f0ad4e”
},
“&.MUILinerProgress dashedColorPrimary”：{
背景图片：
“径向梯度（#f6ce95 0%，#f6ce95 16%，透明42%）”
}
}
});

---

在第二个解决方案中，否定缓冲区的第一条规则：

：not（.muilearprogress buffer）

。此外，缓冲区

.MuiLinearProgress colorPrimary

似乎是根后代-请参阅我的第二条规则

const useStyles = makeStyles({
  root: {
    height: "40px",
    "&.MuiLinearProgress-colorPrimary:not(.MuiLinearProgress-buffer)": {
      backgroundColor: "#f6ce95"
    },
    "& .MuiLinearProgress-colorPrimary": {
      backgroundColor: "#f6ce95"
    },
    "& .MuiLinearProgress-barColorPrimary": {
      backgroundColor: "#f0ad4e"
    },
    "& .MuiLinearProgress-dashedColorPrimary": {
      backgroundImage:
        "radial-gradient(#f6ce95 0%, #f6ce95 16%, transparent 42%)"
    }
  }
});

<LinearProgress
    variant="determinate"
    color="primary"
    valueBuffer={40}
    value={20}
    classes={{
      root: classes.root
    }}
/>

const useStyles=makeStyles({
根目录：{
高度：“40px”，
“&.MuiLinearProgress colorPrimary:不是（.MuiLinearProgress缓冲区）”：{
背景颜色：“f6ce95”
},
“&.MuiLinearProgress colorPrimary”：{
背景颜色：“f6ce95”
},
“&.MuiLinearProgress barColorPrimary”：{
背景色：“f0ad4e”
},
“&.MUILinerProgress dashedColorPrimary”：{
背景图片：
“径向梯度（#f6ce95 0%，#f6ce95 16%，透明42%）”
}
}
});