javascript - 如何设置 Material ui时间选择器对话框样式

Question

我正在集成 material ui time picker

我需要改变时间的颜色

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

我尝试过，但没有成功

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

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

请帮忙!!!

Answer 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中的样式