0
476
ViewsCómo cambiar el tema del calendario en TextField en Material Ui
Estoy usando material ui y tratando de cambiar el tema del calendario, pero el cuadro de texto había cambiado, aunque el calendario no se ve afectado por el tema. También estoy publicando imágenes y fragmentos de código aquí.
dateIcon: { 'input[type="date"]::-webkit-calendar-picker-indicator': { color: 'green', }, }, DateBackGround: { background: theme.palette.background.paper, color: theme.palette.text.primary, '& .MuiOutlinedInput-input': { paddingRight: 2, }, }, <Grid item xs={6}> <div> <OutlinedTextField variant="outlined" type="date" id="by-this-date" size="small" onChange={updateWhatIfDate} value={expiryDateFormatted} className={`${`textInput`} ${classes.DateBackGround} ${classes.dateIcon}`} style={{ width: '100%' }} /> </div> </Grid> Componente:- 
Salida real: - 
Gracias de antemano
·
Santiago Gelvez
1 answers
Answer question0
1ra Solución:
Puede establecer la propiedad sx en el componente para sobrescribir las propiedades de estilo predeterminadas:
const color = "#c44242"; ... return ( <DatePicker renderInput={(params) => { return ( <TextField {...params} sx={{ svg: { color }, input: { color }, label: { color } }} /> ); }} ...other props /> )2da solución:
También puede crear un tema personalizado y sobrescribir colores dentro de él:
const theme = createTheme({ components: { MuiIconButton: { styleOverrides: { sizeMedium: { color } } }, MuiOutlinedInput: { styleOverrides: { root: { color } } }, MuiInputLabel: { styleOverrides: { root: { color } } } } });
·
Santiago Gelvez
Report
Answer question