Как установить материал UI время выбора стиля дилог

Question

Я интегрирую Материал 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 из вашего TimePicker.js, а не из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