如何为Material UI DateTimePicker组件添加右侧外边距？

问题原因 #

你之前的sx配置未生效，是因为不需要通过嵌套子选择器选中MuiOutlinedInput-root来加外边距，DateTimePicker的sx属性直接作用于组件根节点，直接配置根节点的外边距即可生效，而且写法更简洁。

解决方案 #

有两种稳定的实现方式：

1. 直接给第一个DateTimePicker的sx属性配置右外边距

<DateTimePicker
  renderInput={(props) => <TextField {...props} />}
  label="DateTimePicker"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  // 直接配置根节点右外边距即可
  sx={{ mr: 5 }}
/>

2. 把样式配置传递给内部的TextField组件，更适合需要定制输入框样式的场景

<DateTimePicker
  // 在renderInput的TextField上加sx属性
  renderInput={(props) => <TextField {...props} sx={{ mr:5 }} />}
  label="DateTimePicker"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
/>

两种方案都可以实现两个日期选择器之间的间距效果，不需要调整其他组件结构。

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