Styling the MUI Linear Progress Bar
1/12/2023
Styling the MUI Linear Progress Bar React component is incredibly confusing when you want to change both the colors of the whole bar and the foreground of the bar, even with the LinearProgressAPI handy.
In order to get this working, I ended up styling the root element with the &.${linearProgressClasses.determinate}
and to style the progress indicator color, I styled the bar1Determinate
(&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}
).
In this example I used styled-components
but this would work with any style library that exports a styled
function that takes an element or react component.
import LinearProgress, {
linearProgressClasses
} from "@mui/material/LinearProgress";
import styled from "styled-components";
const StyledLinearProgressBar = styled(LinearProgress)({
[`&.${linearProgressClasses.determinate}`]: { backgroundColor: "#f0f" },
[`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1Determinate}`]: { backgroundColor: "#0ff" }
});
You can see this in action in this CodeSandbox
This Article is Still in Progress
This post is a work in progress and not yet complete. If you're interested in reading the full article, let me know!
Want to Read It? Your interest helps me prioritize which articles to finish first. Click below to tell me you want to read this article when it's complete.