es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo cambiar el color del interruptor si está desactivado?

23 Jul, 2023 Programación

Tengo que cambiar el color de ActivitySwitch si está deshabilitado. Cada vez que la casilla de verificación no esté marcada, cambie el color del interruptor a gris. Estoy usando MUI para crear el componente.
Aquí está mi código:

<ActivitySwitch
    name={"ampm"}
    defaultValue={true}
    disabled={!isChecked}
    value={!isNetFlowIsChecked ? "AM" : "PM"}
    onChange={handleChange}
    onBlur={handleChange}
    activeToggleText={"AM"}
    inactiveToggleText={"PM"}
/>

CSS:

switch: {
“& span.MuiSwitch-root”: {
height: “15px !important”,
width: 30,
padding: 0,
marginTop: 4,
“& span.MuiButtonBase-root”: {
height: “12px !important”,
padding: “0 3px”,
},
“& span.MuiSwitch-thumb”: {
width: 9,
height: 9,
},
“& span.MuiSwitch-switchBase.Mui-checked”: {
transform: “translateX(13px)”,
},
},
}
“`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el color de ActivitySwitch cuando está deshabilitado, puedes modificar el CSS agregando lo siguiente:

    .switch: {
  "& span.MuiSwitch-root.Mui-disabled": {
    '& $thumb.Mui-disabled': {
      backgroundColor: 'grey', // cambiar color a gris cuando esté deshabilitado
    },
  },
}

    Este código especifica que cuando la clase MuiSwitch-root también está Mui-disabled, el elemento thumb deberá cambiar su propiedad backgroundColor a grey.

    Además, asegúrate de agregar la propiedad Classes al componente ActivitySwitch y pasar la clase switch de la siguiente manera:

    <activityswitch name="ampm" defaultvalue="{true}" disabled="{!isChecked}" value="{!isNetFlowIsChecked" "am"="" :="" "pm"}="" onchange="{handleChange}" onblur="{handleChange}" activetoggletext="AM" inactivetoggletext="PM" classes="{{" switch:="" classes.switch="" }}="" pasa="" la="" clase="" switch="" a="" la="" propiedad="" classes=""></activityswitch>

    Esto asegurará que la clase switch se aplique al componente ActivitySwitch.

Comments are closed.