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

Question

我在自定义日期选择器时遇到问题 popup dialog（例如更改 header 的颜色）。我不能通过 textFieldStyle 的 textField 之类的属性样式来设置它的样式。它没有任何 class 或 id。

我该怎么做？

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 正在使用 tree-shaking 机制来避免不必要的捆绑，因此可以进行销毁。

要更改 header，请使用如下内容：

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

...

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

Can't style datepiker popup dialog

material-ui