如何设置物料UI时间选择器dilog样式

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

首先,将node_modules/material ui time picker/lib/time picker.js中的代码复制到time picker.js中,并记住更改以下两部分。

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

其次,从timepicker.js导入timepicker,而不是从node_模块导入。

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中更改样式。