只需像这样更改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关键字来完成这项工作。

有关如何使用sx属性自定义嵌套组件的信息，请参见MUI文档

您需要创建一个CSS文件index.css，将其导入到index.tsx中并添加以下代码：

.MuiAutocomplete-inputRoot {
  padding-right: 50px !important;
}

可以将padding-right更改为所需的值。
它将覆盖“自动完成”框的默认右填充

输出：

请访问here来试用代码。

这种填充（65 px）的存在是有原因的--为了不允许输入内容溢出输入结束时的清除按钮。您可以将disableClearable prop传递给您的Autocomplete组件，以便从各个方向填充6px，但您将丢失清除按钮。否则，仅覆盖现有填充将导致UI中的内容和清除按钮之间的冲突。

<Autocomplete
        disableClearable
        multiple
        ...other props

MuiAutocomplete: {
  root: {
    "&.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiOutlinedInput- 
     root": {
        paddingRight: 0,
    },
  }
}