如何设置材质ui时间选择器dilog样式

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而不是从node_modules导入TimePicker

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