时间戳

首页 > 解决方案 > 如何设置材质 ui 时间选择器 dilog 样式

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

问题描述

我正在整合材料 ui 时间选择器

我需要改变时间的颜色

在此处输入图像描述

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

我试过这个但没有用

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

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

请帮忙！！！

标签： javascriptreactjsmaterial-ui

解决方案

我已经阅读了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 中的样式

推荐阅读