在 Material-ui 选择器中更改时钟的背景颜色？答案

【问题标题】：Change the Clock's background color in material-ui pickers?在 Material-ui 选择器中更改时钟的背景颜色？
【发布时间】：2020-01-30 01:49:17
【问题描述】：

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

【问题讨论】：

标签： material-ui

【解决方案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;

【讨论】：

我对如何根据您的帖子进行覆盖有所了解，所以谢谢您。附带的问题仍然是关于更改按钮颜色的问题，因为您可以看到它们很轻。我在他们的网站上看到他们使用这个覆盖了按钮颜色，但我在尝试做同样的事情时遇到错误。 const materialTheme = createMuiTheme({ overrides: { MuiPickersModal: { dialogAction: { color: lightBlue["400"], }, }, }, });
错误是“Material-UI：你试图覆盖一个不存在的样式。修复'theme.overrides.MuiPickersModal'的'dialogAction'键。
这有时很棘手，需要时间来掌握。我不认为 MuiPickersModal 存在。要检查需要覆盖的样式，请打开 DevTools（chrome 中的 f12），然后开始检查元素，直到找到所需的元素。从控制台更改颜色以查看它实际上更改了按钮的文本颜色。而且，如果元素 className 是例如“MuiButton-textPrimary”，那么您的覆盖应该是：MuiButton: { textPrimary: { color: 'red', } }。我更新了我的 CodeSandbox，以便您可以使用它
是的，不过我不想覆盖所有主按钮。他们的 CSS 覆盖页面以这个为例，但它在那里也不起作用。 material-ui-pickers.dev/guides/css-overrides#override-example
他们正在使用 DatePicker，而我们正在使用另一个组件。在我们的组件上没有 dialogAction 样式，有 dialogRoot，但它不影响底部的文本颜色。那是因为底部部分是使用 DialogActions 实现的。我认为它们没有提供任何覆盖按钮颜色的好方法。