Saltar al contenido

¿Cómo personalizar los colores en Material UI Stepper Step?

Esta reseña fue analizado por nuestros especialistas para asegurar la exactitud de nuestra esta sección.

Solución:


      steps.map((label, index) => 
        return (
          
             completed=index === 2>
              
                label
              
            
          
        );
      )

similar a completed en classes aplicado a Step Puede aplicar lo siguiente para anular diferentes estados. https://material-ui.com/api/step/#css-api

Fragmento de ejemplo completo https://codesandbox.io/s/vn8m2rqol3

Lo hice así:

        
          this.state.labels[label - 1]
        

Y luego en las clases las he definido de la siguiente manera:

  step: 
    "&$completed": 
      color: "lightgreen"
    ,
    "&$active": 
      color: "pink"
    ,
    "&$disabled: 
      color: "red"
    ,
  ,
  alternativeLabel: ,
  active: , //needed so that the &$active tag works
  completed: ,
  disabled: ,
  labelContainer: 
    "&$alternativeLabel": 
      marginTop: 0
    ,
  ,

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *