html - 如何更改 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 Documentations on how to customize nested components using the sx prop