无法设置日期选择器弹出对话框的样式答案

【问题标题】：Can't style datepiker popup dialog无法设置日期选择器弹出对话框的样式
【发布时间】：2016-05-23 21:11:44
【问题描述】：

我在自定义日期选择器popup dialog 时遇到问题（例如更改标题的颜色）。我无法通过 textFieldStyle 的 textField 等属性样式设置它的样式。它没有任何类或ID。

我该怎么做？

【问题讨论】：

【解决方案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;

【讨论】：

我认为应该是datePicker: { selectColor: cyan500 } 而不是调色板..

【解决方案2】：

如果您使用的是最新版本的 Material-UI，情况会发生变化。 MuiThemeProvider 和 getMuiTheme 分别替换为 createMuiTheme 和 ThemeProvider。

你可以这样使用： import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

现在 Material-UI 正在使用 tree-shaking 机制来避免不必要的捆绑，因此可以进行破坏。

要更改标题，请使用以下内容：

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

...

【讨论】：