Изменить цвет фона часов в меню выбора материалов?

Question

Я использую Material-UI / Pickers ^ 3.2.6. Основной цвет темы Material-UI - серый, а цвет фона часов - серый, что приводит к исчезновению выбранного временного круга и выбранной линии. Ниже изображение, которое показывает это ясно. Мне нужно переопределить или изменить цвет фона часов, чтобы отобразились линии и функциональность. Есть ли способ сделать это?

Answer 1

Создайте MuiTheme и переопределите свойство backgroundColor часов MuiPickersClock-clock. После этого оберните ваш компонент с 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;