# Styling the MUI Linear Progress Bar

> How to style the MUI Linear Progress Bar.

Source: https://curiouslychase.com/engineering/styling-the-mui-linear-progress-bar/

Styling the [MUI Linear Progress Bar React component](https://mui.com/material-ui/react-progress/) 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](https://mui.com/material-ui/api/linear-progress/) 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.

```javascript
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" }
});
```

Preview:

You can see this in action in [this CodeSandbox](https://codesandbox.io/s/styling-linear-progress-bar-6yfdgs)