如何设置材质 ui 时间选择器对话框样式答案

【问题标题】：How to set material ui time picker dilog styles如何设置材质 ui 时间选择器对话框样式
【发布时间】：2019-04-23 00:00:48
【问题描述】：

我正在整合material ui time picker

我需要改变时间的颜色

你可以在图片中看到。我需要更改11:30 pm 的颜色。而且我还需要更改对话框的宽度和高度。

我试过了，但没用

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#efbb40'
    }
  },
  typography: {
    useNextVariants: true,
    suppressDeprecationWarnings: true
  }
})

我搜索了很多，但无法做到。

请帮忙！！！

【问题讨论】：

这里有点复杂。你能提供一个codeandbox吗？我可以给你看。
@Root 我不知道如何创建沙盒。我只是从here 复制粘贴代码。请发布您想要展示的内容作为答案。
@Root 你能回答一下吗？
我已经回答了。只是一个选项。希望对你有所帮助。

标签： javascript reactjs material-ui

【解决方案1】：

我已经阅读了node_modules中时间选择器的原始代码。其中的样式定义与material-ui不同。所以我在这里提供了一个覆盖它们的选项。

首先，将node_modules/material-ui-time-picker/lib/TimePicker.js中的代码复制到一个TimePicker.js中。记得改下面两部分。

var _Clock = require('material-ui-time-picker/lib/Clock');
var _util = require('material-ui-time-picker/lib/util');

其次，从你的 TimePicker.js 中导入 TimePicker，而不是从 node_modules 中

import TimePicker from './TimePicker'

                <Button
                    onClick={() => this.setState({ open: true })}
                >
                    Open time picker
                </Button>
                <Dialog
                    maxWidth='xs'
                    open={this.state.open}
                >
                    <TimePicker/>
                    <DialogActions>
                        <Button onClick={() => this.setState({ open: false })} color='primary'>
                            Cancel
                        </Button>
                        <Button onClick={() => this.setState({ open: false })} color='primary'>
                            Ok
                        </Button>
                    </DialogActions>
                </Dialog>

那么，你现在将得到相同的 TimePicker。你可以随意更改 TimePicker.js 中的样式

【讨论】：