覆盖所有变体的 React Material UI 进度条颜色答案

【问题标题】：Override React Material UI progress bar colour for all variants覆盖所有变体的 React Material UI 进度条颜色
【发布时间】：2020-10-21 18:37:12
【问题描述】：

我正在尝试覆盖 Material UI linear progress 条形颜色。我尝试的第一个解决方案（简化）如下。

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
        }}
      />
  );
}

上述方法适用于除buffer 变体之外的所有变体。

我尝试的第二个解决方案如下。

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,
        }}
      />
  );
}

上述方法适用于 buffer 变体，但不适用于其他任何变体。

如何让所有变体都使用自定义颜色？

我一直在这里使用这个小代码沙箱：https://codesandbox.io/s/material-demo-forked-w0t06?file=/demo.js

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

在您的第二个解决方案中，否定缓冲区的第一条规则：:not(.MuiLinearProgress-buffer)。此外，缓冲区.MuiLinearProgress-colorPrimary 似乎是根后代 - 请参阅我的第二条规则

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
    }}
/>

【讨论】：