Material UI 使用 makeStyles 无法覆盖 DatePicker 样式问题求解

样式失效原因 #

你通过classes属性传递的formControl样式不生效，是因为KeyboardTimePicker组件对外暴露的可覆盖CSS规则名中没有对应formControl的项，导致自定义样式没有被挂载到你想要加边框的DOM节点上。

解决方法 #

直接把自定义样式通过className属性挂载到KeyboardTimePicker组件的根节点即可生效，修改后的代码如下：

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";

const useStyles = makeStyles(() => ({
  datePickerWrap: {
    border: "1px solid grey"
  }
}));

export default function MaterialUIPickers() {
  const classes = useStyles();
  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"
        }}
        className={classes.datePickerWrap}
      />
    </MuiPickersUtilsProvider>
  );
}

如果需要仅给输入框区域加边框，不涉及外层容器，也可以用嵌套选择器指定内部节点：

const useStyles = makeStyles(() => ({
  datePickerWrap: {
    "& .MuiInputBase-root": {
      border: "1px solid grey",
      borderRadius: 4,
      padding: '2px 4px'
    }
  }
}));

使用时同样挂载className={classes.datePickerWrap}到KeyboardTimePicker组件即可。

内容的提问来源于stack exchange，提问作者CCCC