¡Necesito cambiar mi pequeño ícono negro en la casilla de verificación a otro color!
Este es mi código.
Tema de interfaz de usuario material:
export const colors: IAppColors = { darkTheme: { primary: { placeholder: "#607589", bright: "#37AFE2", light: "#276899", grey: "#242F3D", main: "#17212B", dark: "#0E1621", }, secondary: { grey: "rgba(255,255,255, .08)", light: "rgba(255,255,255, .1)", main: "#fff", dark: "", }, }, };Estilos de casilla de verificación del tema Mui:
MuiCheckbox: { styleOverrides: { root: { transition: "all .2s ease", "&.Mui-checked": { ".MuiSvgIcon-root": { color: colors.darkTheme.primary.bright, }, }, ".MuiSvgIcon-root": { fontSize: "2.2rem", }, ".MuiTouchRipple-root": { opacity: "0.3", }, }, }, },Entonces, ¿cómo cambio el color de este pequeño icono negro a blanco?
Este pequeño icono de color hereda del color principal de mi paleta de temas mui.
Traté de cambiar mi color principal en la paleta de colores de mi tema a blanco, y funcionó para mí, pero tengo un tema negro, así que necesito cambiar solo este pequeño icono de color, no un color principal de la aplicación.
puede cambiar el ícono y el complemento de ícono marcado en el componente Casilla de verificación
<Checkbox color="primary" icon={props.disabled ? <CheckboxDisabledIcon /> : <CheckboxIcon />} checkedIcon={indeterminate ? <CheckboxIndeterminateIcon /> : <CheckboxActiveIcon />} />como esto