更改材质用户界面选择器中时钟的背景颜色？

Question

我正在使用material-ui / pickers ^ 3.2.6，material-ui主题原色为灰色，而Clock的背景色也为灰色，使选定的时间圈和选定的行消失。下面是一张清晰显示它的图像。我需要覆盖或更改时钟背景色，以便显示线条和功能。有办法吗？

Answer 1

创建一个MuiTheme，并覆盖MuiPickersClock-clock backgroundColor属性。
之后，用ThemeProvider包装您的组件：

import React from "react";
import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
  overrides: {
    MuiPickersClock: {
      clock: {
        backgroundColor: 'red'
      }
    }
  }
});

const StaticTimePicker = () => {

  return (
    <ThemeProvider theme={theme}>
     <MuiPickersUtilsProvider utils={DateFnsUtils} >
       <KeyboardDateTimePicker
        label="Keyboard with error handler"
        onError={console.log}
        minDate={new Date("2018-01-01T00:00")}
        format="yyyy/MM/dd hh:mm a"
       />
      </MuiPickersUtilsProvider>
     </ThemeProvider>
  );
};

export default StaticTimePicker;