如何正确覆盖 MUI 5 输入填充？答案

【问题标题】：How can I override MUI 5 input padding right?如何正确覆盖 MUI 5 输入填充？
【发布时间】：2022-10-13 14:43:10
【问题描述】：

我正在使用 MUI 5，我想更新输入默认填充权。

我创建了一个CustomizedNativeSelect 并在其中更新了MuiInputBase-input 填充。但是，这个新的padding-right 不能覆盖默认值。

除了使用inputProps 和styles 之外，有没有办法可以覆盖padding-right？

https://codesandbox.io/s/optimistic-pare-lrxeiv?file=/demo.tsx

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以通过这种方式更改填充。

const CustomizedNativeSelect = styled(NativeSelect)`
 .MuiInputBase-input {
   padding: 10px 55px;
 }
 .css-1dmqq7i-MuiNativeSelect-select-MuiInputBase-input-MuiInput-input.css-1dmqq7i-MuiNativeSelect-select-MuiInputBase-input-MuiInput-input.css-1dmqq7i-MuiNativeSelect-select-MuiInputBase-input-MuiInput-input {
   padding-right: 100px;
  }
`;

【讨论】：

【解决方案2】：

您可以直接在 MUI 组件上使用sx：

<NativeSelect
  value={3}
  sx={{
    paddingTop: 2,
    paddingBottom: 2,
    paddingRight: 10,
    paddingLeft: 10,
  }}
>
  {options}
</NativeSelect>;

Link 到沙盒。

【讨论】：