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.

  • es.davy.ai/
  • Programación /
  • Material-ui DatePicker – cómo cambiar el color de las letras del día de la semana y las flechas

Material-ui DatePicker – cómo cambiar el color de las letras del día de la semana y las flechas

29 May, 2023 Programación

Estoy intentando cambiar los colores de las letras de los días de la semana (S, M, T, W, T, F, S) al igual que las flechas que cambian los meses en el modal de DatePicker. Pude cambiar el fondo del modal y el menú desplegable del año aplicando esto como una anulación de tema:

MuiPaper: {
styleOverrides: {
root: {
backgroundColor: "#eaea87",
color: "blanco",
},
},
},

Desafortunadamente, no puedo encontrar una manera de cambiar las letras de los días de la semana ni las flechas izquierda/derecha que cambian los meses. ¿Alguna idea?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el color de las letras de los días de la semana y las flechas en el modal DatePicker usando Material-UI, puedes usar los siguientes selectores CSS:

    /* Selector para las letras de los días de la semana */
.MuiTypography-caption.MuiTypography-colorInherit {
  color: /* su color deseado */;
}

/* Selector para las flechas del datepicker */
.MuiButtonBase-root.MuiIconButton-root .MuiSvgIcon-root {
  color: /* su color deseado */;
}

    Puede agregar estos selectores a sus anulaciones de tema en su archivo de tema Material-UI. Por ejemplo:

    const theme = createTheme({
  overrides: {
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundColor: "#eaea87",
          color: "white",
        },
      },
    },
    MuiTypography: {
      caption: {
        colorInherit: {
          color: /* su color deseado */,
        },
      },
    },
    MuiButtonBase: {
      root: {
        '& .MuiSvgIcon-root': {
          color: /* su color deseado */,
        },
      },
    },
  },
});

    Reemplace /* su color deseado */ con su código o nombre de color preferido.

Comments are closed.