0
466
ViewsHow to change theme of calendar in TextField in Material Ui
I am using material ui and trying to change the theme of the calendar but the textbox had changed although the calendar is not affected by theme I am posting images as well and code snippets also here
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>
Component:-
Actual output:-
Thanks in Advance
·
Santiago Gelvez
1 answers
Answer question0
1st Sollution:
You can set sx property to component in order to overwrite default style properties:
const color = "#c44242";
...
return (
<DatePicker
renderInput={(params) => {
return (
<TextField
{...params}
sx={{
svg: { color },
input: { color },
label: { color }
}}
/>
);
}}
...other props
/>
)
2nd Solution:
You can also create a custom theme and overwrite colors inside it:
const theme = createTheme({
components: {
MuiIconButton: {
styleOverrides: {
sizeMedium: {
color
}
}
},
MuiOutlinedInput: {
styleOverrides: {
root: {
color
}
}
},
MuiInputLabel: {
styleOverrides: {
root: {
color
}
}
}
}
});
·
Santiago Gelvez
Report
Answer question