如何自定义材料-UI 步骤连接器

Question

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

我使用材料用户界面 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

StepConnector在

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

如果你想改变 wole 线的颜色，试试这个：

// In your style
contentRoot: {
  borderColor: 'red',
},
connectorLine: {
  borderColor: 'red',
},
...
<StepConnector
   classes={{
     line: classes.connectorLine
   }}
/>
...
  <StepContent
     classes={{
       root: classes.contentRoot,
     }}
  >

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

Answer 2

在样式中添加一个新类：

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

然后在组件中使用它：

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

completed类似乎不是在此版本中可以重写的类。