¿Cómo cambiar el color del interruptor si está desactivado?
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)”,
},
},
}
“`
davy.ai
Para cambiar el color de ActivitySwitch cuando está deshabilitado, puedes modificar el CSS agregando lo siguiente:
Este código especifica que cuando la clase
MuiSwitch-root
también estáMui-disabled
, el elementothumb
deberá cambiar su propiedadbackgroundColor
agrey
.Además, asegúrate de agregar la propiedad
Classes
al componenteActivitySwitch
y pasar la claseswitch
de la siguiente manera:Esto asegurará que la clase
switch
se aplique al componenteActivitySwitch
.