CODEWITHSUNDEEP
reactjsmaterial-ui
Corbuk
Corbuk

Reputation: 700

Override React Material UI progress bar colour for all variants

I am trying to override the Material UI linear progress bar colours. The first solution I tried (simplified) is below.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const useStyles = makeStyles({
  colorPrimary: {
    backgroundColor: "#f6ce95"
  },
  barColorPrimary: {
    backgroundColor: "#f0ad4e"
  },
  dashedColorPrimary: {
    backgroundImage:
      "radial-gradient(#f6ce95 0%, #f6ce95 16%, transparent 42%)"
  }
});

export default function LinearDeterminate() {
  const classes = useStyles();

  return (
      <LinearProgress
        variant="determinate"
        color="primary"
        valueBuffer={40}
        value={20}
        classes={{
          colorPrimary: classes.colorPrimary,
          dashedColorPrimary: classes.dashedColorPrimary,
          barColorPrimary: classes.barColorPrimary
        }}
      />
  );
}

The above works fine with all but the buffer variant.

The second solution I tried is the following.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const useStyles = makeStyles({
  root: {
    "& .MuiLinearProgress-colorPrimary": {
      backgroundColor: "#f6ce95"
    },
    "& .MuiLinearProgress-barColorPrimary": {
      backgroundColor: "#f0ad4e"
    },
    "& .MuiLinearProgress-dashedColorPrimary": {
      backgroundImage:
        "radial-gradient(#f6ce95 0%, #f6ce95 16%, transparent 42%)"
    }
  },
});

export default function LinearDeterminate() {
  const classes = useStyles();

  return (
      <LinearProgress
        variant="buffer"
        color="primary"
        valueBuffer={40}
        value={20}
        classes={{
          root: classes.root,
        }}
      />
  );
}

The above works fine with the buffer variant, but not any of the others.

How would I make all variants work with a custom colour?

I have been using this small code sandbox here: https://codesandbox.io/s/material-demo-forked-w0t06?file=/demo.js

Upvotes: 0

Views: 3905

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

On your second solution, negate the first rule for the buffer: :not(.MuiLinearProgress-buffer). Also, the buffer .MuiLinearProgress-colorPrimary seems to be a root descendant - see my second rule

const useStyles = makeStyles({
  root: {
    height: "40px",
    "&.MuiLinearProgress-colorPrimary:not(.MuiLinearProgress-buffer)": {
      backgroundColor: "#f6ce95"
    },
    "& .MuiLinearProgress-colorPrimary": {
      backgroundColor: "#f6ce95"
    },
    "& .MuiLinearProgress-barColorPrimary": {
      backgroundColor: "#f0ad4e"
    },
    "& .MuiLinearProgress-dashedColorPrimary": {
      backgroundImage:
        "radial-gradient(#f6ce95 0%, #f6ce95 16%, transparent 42%)"
    }
  }
});

<LinearProgress
    variant="determinate"
    color="primary"
    valueBuffer={40}
    value={20}
    classes={{
      root: classes.root
    }}
/>

Edit Material demo (forked)

Upvotes: 4

Related Questions