Styling the MUI Linear Progress Bar

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