Не могу стилизовать всплывающее окно с датой

Question

У меня проблема с настройкой всплывающего диалогового окна DatePicker(например, изменить цвет заголовка). Я не могу стилизовать его по стилю атрибутов, например textField и textFieldStyle. У него нет ни класса, ни идентификатора.

Как мне это сделать?

Answer 1

Единственное место, которое вы можете переопределить, это тема:

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

Если вы используете последнюю версию Material-UI, все изменилось. MuiThemeProvider а также getMuiTheme заменены на createMuiTheme а также ThemeProvider соответственно.

Вы можете использовать это так:import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

Теперь Material-UI использует механизм встряхивания дерева, чтобы избежать ненужных бандлов, так что деструкция не помешает.

Чтобы изменить заголовок, используйте что-то вроде этого:

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

...