How to customise DateTimePicker from Material-UI
I'm working with this right now, wat i did to partially override the styles is to wrap in a ThemeProvider (you can pass your theme trow your component)
<MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={defaultMaterialTheme}>
<KeyboardDatePicker
...
/>
</ThemeProvider>
</Grid>
</MuiPickersUtilsProvider>
And your theme could be something, like this
import { createMuiTheme } from '@material-ui/core'
const defaultMaterialTheme = createMuiTheme({
overrides: {
MuiPickersCalendarHeader: {
switchHeader: {
color: '#6A148E',
textTransform: 'uppercase',
},
dayLabel: {
textTransform: 'uppercase',
},
},
MuiPickersDay: {
day: {
color: '#707070',
},
daySelected: {
backgroundColor: '#6A148E',
'&:hover': {
backgroundColor: '#6A148E',
},
},
current: {
color: '#6A148E',
},
},
MuiSvgIcon: {
root: {
fill: '#6A148E',
},
},
MuiOutlinedInput: {
root: {
'&:hover': {
border: '10px solid red !important', // i'm struggling with this :/
},
},
},
},
})
export default defaultMaterialTheme
Hope it's help
AlbertMunichMar
Updated on June 13, 2022Comments
-
AlbertMunichMar almost 2 years
I am trying to customise the
DateTimePicker
fromMaterial-UI
. Here is its documentation: https://material-ui-pickers.dev/api/DateTimePickerThere is no section for the styling. I want to change the main color for all the coloured components. What I've tried so far is using the general
theme
documentation and try to change the style of the theme:const theme = createMuiTheme({ status: { danger: '#FF72B1', }, dateTimePicker: { headerColor: '#FF72B1', selectColor: '#FF72B1', }, datePicker: { selectColor: '#FF72B1', headerColor: '#FF72B1' } }); function App() { return ( <ThemeProvider theme={theme}> <Routes /> </ThemeProvider> ) }
As far as I understood from the
theme
documentation, the only thing that I've done so far is defining variables with styles, but they are not going to be applied. I have to specify them in the exact component, and here comes the tricky part.In my
Material-UI DateTimePicker
:function MaterialDateTimePicker() { const classes = useStyles() return ( <Fragment> <DateTimePicker label={label} inputVariant="outlined" value={value} onChange={onChange} classes={{ root: classes.root, checked: classes.checked, }} /> </Fragment> ); }
I have tried to applied the styling:
const useStyles = makeStyles(theme => ({ root: { color: '#FF72B1', backgroundColor: 'orange', '& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': { backgroundColor: 'green' } }, checked: {}, }));
This is how I've been trying to style components with this library, based on research, reading the docu, and some SO answers:
How to change material UI select border and label
So basically you have to go to the documentation, try to find the .XXX class that matches the component that you want to customise, and if documentation is missing, you have to go to the DOM, and start looking for this class.
I did that, but I have a couple of questions:
1) In my particular case, I have the problem that on my
DateTimePicker
I apply theroot
classes, which are on theinput
component level. The calendar that pops up, is not a children of this component, it's open by javascript, therefore I don't know how to access it.This syntax does not work any longer:
root: { color: '#FF72B1', backgroundColor: 'orange', '& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': { backgroundColor: 'green' } },
Because
root
is the input, not the calendar that pop ups.2) Is this really the way to go with this library? Because all the answers on SO and complains go on this direction. Does anybody know another strategy?
3) In
@material-ui/pickers
node_modules
folder I couldn't find the css file. I would like to pick it and customise there, like it's possible forreact-dates
library etc. Is that possible? Where are the css stylings?I've prepared a sandbox with what I've tried:
https://codesandbox.io/s/inspiring-napier-zh4os
(Unfortunately the utils library is installed but not working, locally in my computer the picker works fine, I just can't style it)