Как настроить Material-UI StepConnector - PullRequest
Новая
       6

Как настроить Material-UI StepConnector

0 голосов
/ 01 апреля 2019

Я пытаюсь настроить 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 вообще не меняется.

Ответы [ 2 ]

1 голос
/ 01 апреля 2019

У StepConnector нет класса complete в v1.4.0, документация для 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

1 голос
/ 01 апреля 2019

Добавьте новый класс в ваших стилях: 

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

А затем используйте его в своем компоненте: 

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

Класс completed не выглядит как класс, который может быть переопределен в этой версии.

...