材质 ui - 无法使用 makeStyles 覆盖日期选择器样式答案

【问题标题】：Material ui - cannot override datepicker style using makeStyles材质 ui - 无法使用 makeStyles 覆盖日期选择器样式
【发布时间】：2021-11-04 20:42:17
【问题描述】：

我想为下面的日期选择器添加边框。
当我在 Web 检查器中使用苹果内联样式时，它可以工作。

但是当我尝试使用makeStyles 应用样式时，什么都没有发生。

demo.js

import "date-fns";
import React from "react";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker
} from "@material-ui/pickers";

import { makeStyles } from "@material-ui/core/styles";

export const styles = makeStyles(() => ({
  formControl: {
    border: "1px solid grey"
  }
}));

export default function MaterialUIPickers() {
  const classes = styles();
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardTimePicker
        margin="normal"
        id="time-picker"
        value={selectedDate}
        onChange={handleDateChange}
        KeyboardButtonProps={{
          "aria-label": "change time"
        }}
        classes={{
          formControl: classes.formControl
        }}
      />
    </MuiPickersUtilsProvider>
  );
}

代码沙盒：
https://codesandbox.io/s/material-demo-forked-viq2m?file=/demo.js

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

如果你检查日志，你会看到

由于KeyboardTimePicker继承自TextField，而TextField CSS API只接受root（reference），所以解决方法是将formControl键更新为root

      <KeyboardTimePicker
        margin="normal"
        id="time-picker"
        value={selectedDate}
        onChange={handleDateChange}
        KeyboardButtonProps={{
          "aria-label": "change time"
        }}
        classes={{
          root: classes.formControl
        }}
      />

【讨论】：

【解决方案2】：

那是因为@material-ui/pickers 是在 MUI 之上单独开发的。

从用户体验的角度来看，日期/时间选择器是非常简单的控件，所以大多数人只是使用默认外观

这就是我们不提供任何组件类 api 的原因覆盖任何特定组件的样式表。唯一的办法使用全局material-ui覆盖现有样式表主题覆盖。

这是他们的docs。

我已经设置了一个带有红色边框的示例。

https://codesandbox.io/s/material-demo-forked-wgpvf?file=/demo.js

【讨论】：

【解决方案3】：

我找到了另一个与this post 的其他答案不同的解决方案

const useStyles = makeStyles({
  root: {
    "& .MuiInputBase-root": {
      border: "1px solid red",
    }
  }
});

const classes = useStyles();

return (
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
      className={classes.root}
      {...}
    />
  </MuiPickersUtilsProvider>
);

我觉得这也是解决办法之一。

【讨论】：