I have set a theme for my codebase using createTheme like so:

import { createTheme } from '@mui/material/styles';

export default function getTheme() {
  return {
    theme: createTheme({
      palette: {
        ...,
        progress: {
          0: '#000000',
          126: '#222222',
          251: '#444444',
          376: '#666666',
          501: '#888888',
          626: '#aaaaaa',
          751: '#cccccc',
          876: '#eeeeee',
          1000: '#ffffff',
        },
        ...,
      }
    });
  }
}

It works just fine for the Typography component:

import { Typography } from '@mui/material';

export default function HelloWorld() {
  return (
    <Typography color="progress.126">
      Hello World
    </Typography>
  );
}

However, it raises a TypeError: Cannot read properties of undefined (reading 'main') when I use it with LinearProgress:

import { LinearProgress } from '@mui/material';

export default function ProgressBar() {
  return (
    <LinearProgress
      variant="determinate"
      value={50}
      color="progress.501"
      sx={{
        height: 8,
        width: 120,
      }}
    />
  );
}

How can I apply these colors to the LinearProgress like I would with other Material UI components?

I have set a theme for my codebase using createTheme like so:

import { createTheme } from '@mui/material/styles';

export default function getTheme() {
  return {
    theme: createTheme({
      palette: {
        ...,
        progress: {
          0: '#000000',
          126: '#222222',
          251: '#444444',
          376: '#666666',
          501: '#888888',
          626: '#aaaaaa',
          751: '#cccccc',
          876: '#eeeeee',
          1000: '#ffffff',
        },
        ...,
      }
    });
  }
}

It works just fine for the Typography component:

import { Typography } from '@mui/material';

export default function HelloWorld() {
  return (
    <Typography color="progress.126">
      Hello World
    </Typography>
  );
}

However, it raises a TypeError: Cannot read properties of undefined (reading 'main') when I use it with LinearProgress:

import { LinearProgress } from '@mui/material';

export default function ProgressBar() {
  return (
    <LinearProgress
      variant="determinate"
      value={50}
      color="progress.501"
      sx={{
        height: 8,
        width: 120,
      }}
    />
  );
}

How can I apply these colors to the LinearProgress like I would with other Material UI components?

• javascript
• reactjs
• next.js
• material-ui

Share Follow asked Mar 7 at 18:55 Renan ElfoRenan Elfo 2766 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Consider reading the docs on How to customize:

Overriding nested component styles

To customize a specific part of a component, you can use the class name provided by Material UI inside the sx prop... Material UI rely on class names that all follow a standard pattern: [hash]-Mui[Component name]-[name of the slot].

In your case you can find the classes names on the doc LinearProgress API page.

Putting it together, it's just a matter of finding the class and targeting in the sx prop to customize:

<LinearProgress
        variant="determinate"
        value={50}
        color="inherit"
        sx={{
          height: 8,
          width: 120,
          "& .MuiLinearProgress-bar" : {
             color: "progress.501"
          }
        }}
      />

You might have to change other classes to get to the desired result;

If you want it to be more reusable consider using styled as shown here;

I found a workarround using Box and setting the color on LinearProgress to inherit:

import { Box, LinearProgress } from '@mui/material';

export default function ProgressBar() {
  return (
    <Box color="progress.501">
      <LinearProgress
        variant="determinate"
        value={50}
        color="inherit"
        sx={{
          height: 8,
          width: 120,
        }}
      />
    </Box\>
  );
}

However, I wonder if there's a way to make it work like it does in Typography, i.e., without needing an extra Box component.