Styling the MUI Linear Progress Bar

How to style the MUI Linear Progress Bar.

thumbnail for 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

Was this page helpful?

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.