Question

我正在尝试使用类自定义Material-UI StepConnector，但这似乎不起作用。

我使用material-ui 1.4.0

这是我尝试做到的方式。

       <Stepper
          connector={
            <StepConnector
              classes={{
                completed: { borderColor: "red" },
                line: { borderColor: "red" }
              }}
            />
          }
          activeStep={activeStep}
          orientation="vertical"
        >

这里是演示https://codesandbox.io/s/oxrw7ryy7z

您可以看到StepConnector的颜色完全没有改变。

Answer 1

以您的样式添加新类：

connector: {
  borderLeft: "1px red solid"
}

然后在组件中使用它：

<StepConnector
  classes={{
    line: classes.connector
  }}
/>

completed类does not appear是可以在此版本中覆盖的类。

Answer 2

v1.4.0中StepConnector没有complete类，v1.4.0的文档：https://v1-4-0.material-ui.com/api/step-connector/

如果您想更改羊毛线的颜色，请尝试以下操作：

// In your style
contentRoot: {
  borderColor: 'red',
},
connectorLine: {
  borderColor: 'red',
},

...

<StepConnector
   classes={{
     line: classes.connectorLine
   }}
/>
...
  <StepContent
     classes={{
       root: classes.contentRoot,
     }}
  >

演示：https://codesandbox.io/s/p9wj1498yx

如何自定义Material-UI StepConnector

2 个答案: