如何更改 Material UI 的日期选择器的填充？

Posted 2023-02-22

【中文标题】如何更改 Material UI 的日期选择器的填充？

【英文标题】：How to change padding of Material UI's datepicker?

【发布时间】：2021-01-27 20:43:31

【问题描述】：

Here 是密码框链接

function InlineDatePickerDemo(props) 
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider utils=DateFnsUtils>
        <KeyboardDatePicker
          style= padding: "20px" 
          autoOk
          variant="inline"
          inputVariant="outlined"
          label="With keyboard"
          format="MM/dd/yyyy"
          value=selectedDate
          InputAdornmentProps= position: "start" 
          onChange=(date) => handleDateChange(date)
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );

我想减少日期选择器框内的间隙，但提供自定义样式并没有影响。

我很想知道为什么样式不起作用以及解决此类问题的方法是什么。

【问题讨论】：

请在 Stack Overflow 上包含所有相关代码，而不仅仅是在外部站点上。

我已经包含了带有所有相关代码的代码框，而不是任何外部站点。你还想知道什么？

codesandbox.io != ***.com 因此它是一个外部站点。不知道这怎么不明显。 @NearHuscarl 将代码从代码沙箱复制到此站点，在 CC-by-SA 4.0 下重新许可您的代码。作为版权所有者，您应该这样做。

我不知道如果已经提供了沙盒代码，则必须在此处包含代码，因为这更有帮助并且要求（在大多数情况下），这就是为什么我强调代码沙盒它不仅仅是任何网站，它还不止于此。无论如何，真的很抱歉给您带来麻烦，我会在此处发布任何问题时牢记这一点。

【参考方案1】：

您所做的是为父组件设置样式。为了改变picker内部组件之间的间距，需要在子组件中重写以下类：

const useStyles = makeStyles(
  root: 
    "& .MuiInputBase-root": 
      padding: 0,
      "& .MuiButtonBase-root": 
        padding: 0,
        paddingLeft: 10
      ,
      "& .MuiInputBase-input": 
        padding: 15,
        paddingLeft: 0
      
    
  
);

const classes = useStyles();

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

现场演示

【讨论】：

这会起作用，但是当使用 webpack 生产构建时，MUI 类名将被转换为字母数字字符串，这将不再起作用。不得不真正使用 html 元素。

@Nicole 这很奇怪，因为如果 className 以Mui 开头，通常不会在生产中更改它。见this。