我如何更改 react mui mobilestpper 点颜色？答案

【问题标题】：how do i change react mui mobilestpper dots color?我如何更改 react mui mobilestpper 点颜色？
【发布时间】：2021-08-23 05:07:52
【问题描述】：

找不到如何更改点的颜色尝试了 makestyles 的各种变化，包括点：{ 背景颜色：“#008000！重要” } 但没有任何效果 https://codesandbox.io/s/material-demo-forked-sslwl?file=/demo.js:423-480

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

根据MobileStepper API docs，您需要将属性提供给classes prop 而不是className。更改活动点颜色的示例：

classes={{
  dotActive: classes.dot
}}

【讨论】：

【解决方案2】：

下面提到了修复。

正确定义样式对象。

const useStyles = makeStyles({
  root: {
    maxWidth: 400,
    flexGrow: 1
  },
  dot: {
    backgroundColor: "#008000"
  },
  dotActive: {
    backgroundColor: "#3f51b5"
  }
});

按照API documentation 定义MobileStepper 中的classes prop。
根据 API 文档，您可以通过 3 种方式覆盖组件的默认样式。这里使用第一种方式，即使用 classes object prop。

<MobileStepper
  variant="dots"
  steps={6}
  position="static"
  activeStep={activeStep}
  classes={{
    root: classes.root, // this will overrides default styles related to MobileStepper root element
    dot: classes.dot, // this will overrides default styles related to dot elements
    dotActive: classes.dotActive,
  }}
  nextButton={
    <Button size="small" onClick={handleNext} disabled={activeStep === 5}>
      Next
      {theme.direction === "rtl" ? (
        <KeyboardArrowLeft />
      ) : (
        <KeyboardArrowRight />
      )}
    </Button>
  }
  backButton={
    <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
      {theme.direction === "rtl" ? (
        <KeyboardArrowRight />
      ) : (
        <KeyboardArrowLeft />
      )}
      Back
    </Button>
  }
/>;

注意 - 如果你覆盖了默认的点颜色，那么你也必须覆盖活动的点颜色。

https://codesandbox.io/s/mobilestepper-53cx2?file=/demo.js:343-522

如果您需要进一步的支持，请告诉我。

【讨论】：