Material-UI v4如何修改KeyboardDatePicker日期输入框的样式

解决方案 #

你之前的样式不生效是因为KeyboardDatePicker的className属性是作用在组件最外层容器上，你加的边框、尺寸样式没有命中内部实际的输入框元素，才会出现外层叠加边框、样式不生效的问题。以下是MUI 4版本下的规范实现方案：

方案1：在useStyles中使用嵌套选择器命中内部元素（推荐单组件自定义）

直接在自定义类中通过嵌套选择器选中输入框对应的MUI原生类修改样式，代码示例：

const useStyles = makeStyles(() =>
  createStyles({
    pickerWrapper: {
      // 控制组件整体宽度
      width: "246px",
      // 命中outlined版本输入框根元素
      "& .MuiOutlinedInput-root": {
        height: "44px",
        fontSize: "12px",
        // 修改默认边框
        "& fieldset": {
          border: "solid 2px #0070D8",
        },
        // 修改hover状态边框
        "&:hover fieldset": {
          borderColor: "#005a9e",
        },
        // 修改聚焦状态边框
        "&.Mui-focused fieldset": {
          borderColor: "#0070D8",
        },
        // 修改输入框内边距
        "& .MuiOutlinedInput-input": {
          padding: "10px 14px",
          verticalAlign: "middle",
        },
      },
      // 若需要修改标签字体也可以对应加规则
      "& .MuiInputLabel-root": {
        fontSize: "12px",
      },
    },
  })
);

使用方式直接将类名赋值给KeyboardDatePicker的className属性即可：

<KeyboardDatePicker
  // 其余原有属性保持不变
  className={classes.pickerWrapper}
/>

方案2：通过InputProps透传样式到输入框

KeyboardDatePicker支持InputProps属性，可以直接把样式配置传递给内部的输入框组件，无需嵌套选择器：

const useStyles = makeStyles(() =>
  createStyles({
    customInput: {
      height: "44px",
      fontSize: "12px",
      "& fieldset": {
        border: "solid 2px #0070D8",
      },
    },
  })
);

组件使用示例：

<KeyboardDatePicker
  // 其余原有属性保持不变
  InputProps={{
    className: classes.customInput,
  }}
  style={{ width: "246px" }} // 整体宽度可以直接在这里设置，也可以加在上面的类里
/>

方案3：全局统一修改所有组件样式

如果需要全站的KeyboardDatePicker都用同一套样式，可以在ThemeProvider的主题配置中覆盖对应类的默认样式：

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createMuiTheme({
  overrides: {
    // 覆盖outlined输入框全局样式
    MuiOutlinedInput: {
      root: {
        height: "44px",
        fontSize: "12px",
        "& fieldset": {
          border: "solid 2px #0070D8",
        },
      },
    },
  },
});

然后把根组件包裹在<ThemeProvider theme={theme}>下即可全局生效。

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