如何从 Material-UI 自定义 DateTimePicker

Question

I am trying to customise the DateTimePicker from Material-UI . Here is its documentation: https://material-ui-pickers.dev/api/DateTimePicker

There 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 the root classes, which are on the input 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 for react-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)

Answer 1

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

Answer 2

I think you just need to cancel out the webkit appearance. There are a couple of ways to cancel out specific webkit styles (so you can add your own). Try the following:

-webkit-appearance: none;

ReactJS inline styles: webkitAppearance: "none";

Also check out other -webkit-[] functions... There are functions for more specific elements such as borders, colours, etc...

Hope this helps :)