Override React Material UI progress bar colour for all variants - reactjs

Question

I am trying to override the Material UI linear progress bar colours. The first solution I tried (simplified) is below.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import LinearProgress from "#material-ui/core/LinearProgress";
const useStyles = makeStyles({
colorPrimary: {
backgroundColor: "#f6ce95"
},
barColorPrimary: {
backgroundColor: "#f0ad4e"
},
dashedColorPrimary: {
backgroundImage:
"radial-gradient(#f6ce95 0%, #f6ce95 16%, transparent 42%)"
}
});
export default function LinearDeterminate() {
const classes = useStyles();
return (
<LinearProgress
variant="determinate"
color="primary"
valueBuffer={40}
value={20}
classes={{
colorPrimary: classes.colorPrimary,
dashedColorPrimary: classes.dashedColorPrimary,
barColorPrimary: classes.barColorPrimary
}}
/>
);
}
The above works fine with all but the buffer variant.
The second solution I tried is the following.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import LinearProgress from "#material-ui/core/LinearProgress";
const useStyles = makeStyles({
root: {
"& .MuiLinearProgress-colorPrimary": {
backgroundColor: "#f6ce95"
},
"& .MuiLinearProgress-barColorPrimary": {
backgroundColor: "#f0ad4e"
},
"& .MuiLinearProgress-dashedColorPrimary": {
backgroundImage:
"radial-gradient(#f6ce95 0%, #f6ce95 16%, transparent 42%)"
}
},
});
export default function LinearDeterminate() {
const classes = useStyles();
return (
<LinearProgress
variant="buffer"
color="primary"
valueBuffer={40}
value={20}
classes={{
root: classes.root,
}}
/>
);
}
The above works fine with the buffer variant, but not any of the others.
How would I make all variants work with a custom colour?
I have been using this small code sandbox here: https://codesandbox.io/s/material-demo-forked-w0t06?file=/demo.js

Answer 1

On your second solution, negate the first rule for the buffer: :not(.MuiLinearProgress-buffer). Also, the buffer .MuiLinearProgress-colorPrimary seems to be a root descendant - see my second rule
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
}}
/>