I want to change the background color of my material ui datepicker modal
import { createMuiTheme } from "@material-ui/core";
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
},
},
},
});
export default materialTheme
In the above code i was able to change colors of date and few others but not the total background color
Are there any documentation from which i can get these class names or any other option
Try in CSS:
.MuiPaper-root {
background-color: #eaea87;
}
MuiPickers is using Dialog Material Ui, so override all dialog component that be used in this pickers. I'm not sure with this solution below. You can try this, hope it's worked.
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
backgroundColor: 'YOUR HEX HERE',
},
},
},
});
I think the good way is send style in DialogProps
https://material-ui-pickers.dev/api/DateTimePicker (section modal wrapper)
so then you can override all dialog modal.
In recent version of MUI (v5.3.1) I resolved this issue by adding sx={{ backgroundColor: 'white' }}<\/code> to
TextField<\/code> in
renderInput<\/code> prop as below:
<MobileDatePicker
label="Date"
value={date}
onChange={(newValue) => {
setDate(newValue);
}}
renderInput={(params) => (
<TextField
sx={{ backgroundColor: 'white' }}
fullWidth
{...params}
/>
)}
/>
You can use createTheme
to provide component overrides ( see docs ):
const theme = createTheme({
components: {
// Name of the component
MuiInputBase: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
backgroundColor: "white",
},
},
},
},
});
You can see the name of the component to use by inspect element and looking at the class names, and you can find the slots in the component definition, eg this is the slots for the MuiInput
component .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.