MUI KeyboardDatePicker 更改日期输入框样式

Question

目前，我正在尝试修改KeyboardDatePicker 板的颜色、大小、字体、填充，但不幸的是，所有方法都不起作用。到目前为止我试过了：

1 .使用样式：

const useStyles = (params: any) =>
  makeStyles(() =>
    createStyles({
      componentStyle: {
        width: params.width ? params.width : 'auto',
        color: params.color ? params.color : 'inherit',
        verticalAlign: 'middle',
        fontSize: '12px',
        border: 'solid 2px #0070D8',
      },
    })
  );

不覆盖并且当前KeyboardDatePicker边框上出现边框，大小也不会改变。

2 。主题提供，它会覆盖日历主题，但不会覆盖KeyboardDatePicker 日期框。

<ThemeProvider theme={theme}>

3 .将样式添加到 KeyboardDatePicker，这是唯一的工作方法

style={{width:"246px",height:"44px"}}

您如何建议修改 KeyboardDatePicker 的样式，是的 style={} 方法不是更改样式的正确方法。 p.s 我使用的是 Material-UI 4

我的键盘日期选择器：

    <KeyboardDatePicker
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      defaultValue={props.value}
      value={selectedDate}
      required={props.required}
      showTodayButton={true}
      disableToolbar
      inputVariant="outlined"
      variant="inline"
      onChange={(selectedDate) => setSelectedDate(selectedDate)}
      KeyboardButtonProps={{
        "aria-label": "change date",
      }}
      keyboardIcon={<Icon icon={ICONS.Cool_icon} />}
      className={classes.componentStyle} // do not overide , but puts on top
    />

Answer 1

makeStyles 是一个钩子工厂，它返回一个样式钩子（通常称为useStyles），它是这样使用的：

const useStyles = makeStyles(...);

在您的代码中，您将useStyles 定义为一个返回makeStyles 的函数，而不是告诉makeStyles 创建一个在这里没有意义的新钩子，因此将您的代码更改为上面的代码。我还为您修复了样式。文字颜色样式应放在InputBase组件中：

const useStyles = makeStyles(() =>
  createStyles({
    componentStyle: {
      verticalAlign: "middle",
      fontSize: "12px",
      width: (params) => (params.width ? params.width : "auto"),

      "& fieldset": {
        border: "solid 2px #0070D8"
      },
      "& .MuiInputBase-root": {
        height: (params) => (params.height ? params.height : "auto"),
        color: (params) => (params.color ? params.color : "inherit")
      }
    }
  })
);

const classes = useStyles({
  color: "red",
  width: 400,
  height: 80,
});

<KeyboardDatePicker
  onChange={() => {}}
  inputVariant="outlined"
  InputProps={{
    className: classes.componentStyle
  }}
/>

如果你想通过createMuiTheme 设置样式，这里是等效的代码。请注意，与上面的 useStyles 方法不同，您不能传递组件道具来创建动态样式：

const theme = createMuiTheme({
  overrides: {
    MuiTextField: {
      root: {
        verticalAlign: "middle",
        fontSize: "12px",
        width: 150,
        "& fieldset": {
          border: "solid 2px #0070D8"
        }
      }
    }
  }
});

它应该再次工作。如需参考，请参阅 this 部分以了解如何将 makeStyles 与组件道具一起使用。

Answer 2

看来你不需要写像useStyles = (params: any) => ...这样的自定义钩子，makeStyles返回的钩子已经接受props param。

在为 MUI 组件设置样式时，您需要检查每个组件的 API 以定义您传递给 makeStyles 的对象，在这种情况下，日期选择器组件是一组其他 MUI 组件，如果您转到 API，您'会看到不同的道具传递给每个单独的组件。要设置输入的样式，您可以传递 InputProps 中 useStyle 挂钩返回的类，根规则与 Input API 中一样，如果您需要更具体的样式，请应用其他规则。

const useInputStyles = makeStyles({
  root: {
    width: (props) => (props.width ? props.width : "auto"),
    color: (props) => (props.color ? props.color : "inherit"),
    verticalAlign: "middle",
    fontSize: "12px",
    border: "solid 2px #0070D8"
  }
});
...
    const inputClasses = useInputStyles()
...
      <KeyboardDatePicker
        ...
        InputProps={{ classes: inputClasses }}
      />

并设置“板”的样式，不确定您是否指的是弹出框，因为您使用inline 变体，所以您在 PopoverProps 中传递样式，在paper 规则中定义样式，如@中所述987654323@

const usePopoverStyles = makeStyles({
  paper: {
    backgroundColor: "green"
  }
});
...
    const popoverClasses = usePopoverStyles();
      ...
      <KeyboardDatePicker
        ...
        PopoverProps={{ classes: popoverClasses }}
      />

你可以在这里看到它https://codesandbox.io/s/mui-keyboarddatepicker-styles-sueqd?file=/src/App.tsx