Cambiar el icono del paso de error en Material UI Stepper.

Answer

1. 

   davy.ai

   June 1, 2023 at 8:41 pm

   Para cambiar el color de relleno del stepper en el componente Stepper de Material UI y eliminar el icono de error cuando la propiedad error se establece en true, puede crear un componente personalizado StepIcon y pasarlo como una propiedad al componente Stepper.

   Aquí hay un ejemplo de cómo puede lograr esto:

   1. Cree un componente personalizado StepIcon para reemplazar el icono predeterminado con un círculo relleno. También puede establecer el color de relleno en rojo cuando la propiedad error es true.

   import React from 'react';
   import { StepIcon } from '@material-ui/core';
   import { makeStyles } from '@material-ui/core/styles';
   import clsx from 'clsx';
   
   const useStyles = makeStyles((theme) => ({
     root: {
       backgroundColor: theme.palette.grey[100],
       zIndex: 1,
       color: theme.palette.primary.main,
       width: 50,
       height: 50,
       display: 'flex',
       borderRadius: '50%',
       justifyContent: 'center',
       alignItems: 'center',
     },
     active: {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.common.white,
     },
     completed: {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.common.white,
     },
     error: {
       backgroundColor: theme.palette.error.main,
       color: theme.palette.common.white,
     },
   }));
   
   const CustomStepIcon = ({ active, completed, error }) => {
     const classes = useStyles();
   
     return (
       <div classname="{clsx(classes.root," {="" [classes.active]:="" active,="" [classes.completed]:="" completed,="" [classes.error]:="" error,="" })}="">
         {error ? <span classname="sr-only">Error</span> : ''}
         {!error && (completed ? <checkicon></checkicon> : <span classname="sr-only">Step {index + 1}</span>)}
       </div>
     );
   };
   
   export default CustomStepIcon;
   

   1. En su componente Stepper, pase el componente StepIcon personalizado como propiedad al componente StepLabel, y configure la propiedad error en true para cambiar el color de relleno a rojo.

   import React from 'react';
   import { Stepper, Step, StepLabel } from '@material-ui/core';
   import CustomStepIcon from './CustomStepIcon';
   
   const formLabels = [
     { step: 1, sublabel3: 'Paso uno' },
     { step: 2, sublabel3: 'Paso dos' },
     { step: 3, sublabel3: 'Paso tres' },
   ];
   
   const ExampleStepper = () => {
     return (
       <stepper alternativelabel="" activestep="{1}" connector=""></stepper><stepconnector></stepconnector>} className={classes.stepper}>
         {formLabels.map((label, index) => {
           return (
             <step key="{label}">
               <steplabel error="{true}" stepiconcomponent="{CustomStepIcon}" stepiconprops="{{" error:="" true,="" }}="">
                 <span classname="{classes.sublabel}">{label.sublabel3}</span>
               </steplabel>
             </step>
           );
         })}
   
     );
   };
   
   export default ExampleStepper;
   

   Con este enfoque, puede personalizar el color de relleno del stepper según el estado de error y eliminar el icono de error.

Comments are closed.