如何更改 MUI 自动完成输入框的右侧填充？

Question

默认情况下，MUI 会向轮廓自动完成框添加 65 像素的右内边距。但是，我想根据我的用例将右侧填充更改为 50px。我试图覆盖正确的填充，但没有运气。这是我的沙箱，我尝试更改自动完成输入框的右侧填充 - https://codesandbox.io/s/sizes-demo-material-ui-forked-95rvqw

还附上需要更改填充的自动完成框的屏幕截图。

有人可以建议如何覆盖自动完成框的默认右侧填充吗？

Answer 1

sx只需像这样更改您的属性：

sx={{
  "& .MuiOutlinedInput-root": {
    paddingRight: "10px!important",
  },
}}

说明： 你的方法是正确的，但是有一些问题我会尝试逐步纠正。

首先，&符号必须是字符串的第一个字母，后跟一个空格。例如：

"& .MuiAutocomplete-hasPopupIcon"

其次，您应该一一定位类，如下所示：

sx={{
  "& .MuiAutocomplete-hasPopupIcon": {
    paddingRight: "50px"
  },
  "& .MuiAutocomplete-hasClearIcon":{
    paddingRight: "50px"
  },
  "& .MuiAutocomplete-inputRoot":{
    paddingRight: "50px"
  },
}}

第三，您只需选择.MuiOutlinedInput-root您想要更改的班级即可。

最后，因为（在这种情况下）嵌套组件中的类具有更高的特异性，您需要添加!important关键字来完成工作。

请参阅 MUI文档，了解如何使用 sx 属性自定义嵌套组件