reactjs - 如何自定义 Material-UI StepConnector

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

StepConnector 在 v1.4.0 中没有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