Can't style datepiker popup dialog

Question

I have a problem with customizing the datepicker popup dialog(For example change color of header). I can't style it by attribute style like textField by textFieldStyle. It doesn't have any class or id.

How can I do it?

Answer 1

The only place you can currently override this is the theme:

import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MyAppRoot from './MyAppRoot';

const muiTheme = getMuiTheme({
  datePicker: {
    selectColor: cyan500,
  },
});

class Main extends React.Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <MyAppRoot />
      </MuiThemeProvider>
    );
  }
}

export default Main;

Answer 2

If you are using the latest version of Material-UI, things changed. MuiThemeProvider and getMuiTheme are replaced by createMuiTheme and ThemeProvider respectively.

You can use like this: import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

Now Material-UI is using tree-shaking mechanism to avoid unnecessary bundles, so destructing is well to go.

To change the header, use something like this:

const muiTheme = createMuiTheme({
    overrides: {
        MuiPickersToolbar: {
            toolbar: { backgroundColor: 'var(--themeP)' }
        },

...