No sé cómo cambiar el color de primario a paso a paso con ganchos React. Lamentablemente, el paso a paso no tiene un método de color integrado, como un icono. Y no he encontrado otra manera de hacerlo. Por favor ayuda y gracias.
Mi código:
const steps = ['Select master blaster campaign settings','Create an ad group','Create an ad',]; const [color, setColor] = useState('primary') const successBoxClicked = (e) => { setColor('success')} <Stepper activeStep={1} alternativeLabel> {steps.map((label) => ( <Step key={label}> <StepLabel>{label}</StepLabel> </Step> ))} </Stepper>para que pueda ir aquí y ver la personalización completa de los componentes de MUI: https://mui.com/customization/how-to-customize/#5-global-css-override
¡El Stepper es un componente muy complejo! Tuve que personalizar uno y usé su guía de personalización para ese componente aquí https://mui.com/components/steppers/#customized-horizontal-stepper
Dependerá del color exacto al que quieras apuntar. La forma más fácil de hacerlo bien podría ser personalizar el tema.
Sin embargo, voy a hacer algunas conjeturas. Supongamos que desea cambiar todos los colores de los iconos de pasos. Podrías usar el accesorio StepIconProps . Lo encontré aquí: https://mui.com/api/step-label/
Si está tratando de extraer un color del tema de esa manera, necesitará acceder al tema directamente. Algo como esto:
const steps = ['Select master blaster campaign settings','Create an ad group','Create an ad',]; const theme = useTheme() // You can import this from material ui const [color, setColor] = useState(theme.palette.primary.main) const successBoxClicked = (e) => { setColor(theme.palette.success.main) } <Stepper activeStep={1} alternativeLabel> {steps.map((label) => ( <Step key={label}> <StepLabel StepIconProps={{style: {color}}}>{label}</StepLabel> </Step> ))} </Stepper> Ciertamente hay otras formas de hacer esto. Es probable que no necesite usar style , esa fue la forma más fácil para mí de sacar esto rápidamente.
¡Buena suerte!