实际输入没有覆盖装饰物后面的区域，所以当浏览器为自动填充的字段设置背景时，它不会延伸到装饰物。当CSS has()选择器有更好的支持(这应该很快),你可以尝试通过在自己的CSS中设置根元素的背景颜色来绕过它，如下所示：

input:-webkit-autofill,
.MuiInputBase-root:has(> input:-webkit-autofill) {
  background-color: blue;
}

实际输入没有覆盖装饰物后面的区域，所以当浏览器为自动填充的字段设置背景时，它不会延伸到装饰物。当CSS has()选择器有更好的支持(应该很快),你可以尝试通过在自己的CSS中设置根元素的背景颜色来绕过它，如下所示：

input:-webkit-autofill,
.MuiInputBase-root:has(> input:-webkit-autofill) {
  background-color: blue;
}

是否有方法可以通过styleOverride在主题中实现这一点？

实际输入没有覆盖装饰物后面的区域，所以当浏览器为自动填充的字段设置背景时，它不会延伸到装饰物。当CSS has()选择器有更好的支持(应该很快),你可以尝试通过在自己的CSS中设置根元素的背景颜色来绕过它，如下所示：

input:-webkit-autofill,
.MuiInputBase-root:has(> input:-webkit-autofill) {
  background-color: blue;
}

是否有方法可以通过styleOverride在主题中实现这一点？

MuiInputBase: {
    styleOverrides: {
      root: {
        "&:has(> input:-webkit-autofill)": {
          backgroundColor: "blue",
        },
      },
    },
  },

是否有官方的解决方案或更新？

是否有官方的解决方案或更新？
只有通过控制 autoComplete 属性
例如：InputProps={{ autoComplete: 'new-password' }}
参考MUI文档

在尝试将TextField的startAdornment背景颜色调整为1password的自动填充背景颜色时遇到了这个问题。我成功地对其进行了微调，专门针对1password的自动填充数据属性。
虽然有点小众，但还是把它放在这里，以便将来能节省别人的时间。
作为上述解决方案的一个附加类：

.MuiInputBase-root:has(> input[data-com-onepassword-filled="light"]) {
  background-color: rgb(219, 237, 255);
}

在sx prop中：

<TextField
  ...
  sx={{
    "& .MuiOutlinedInput-root": {
        "&:has(> input[data-com-onepassword-filled=\"light\"])": {
             backgroundColor: "rgb(219, 237, 255)",
          }
      }
  ...
    }}
    />

结果可以在上面的TextField中显示，与下面的没有它的TextField进行比较：

我认为我已经找到了解决这个问题的完整方案。首先让我们了解一下它是如何工作的，以便根据需要进行修改。

它实际上是什么

自动填充字段上的蓝色背景颜色是浏览器的一个功能，特别是来自Chrome的功能。你可以使用 :-webkit-autofill 伪类选择器来覆盖它。

我们如何编辑它？

使用全局CSS覆盖。

在你的全局CSS文件中添加以下代码以更改颜色：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fa0000 inset !important;
}

在MUI中覆盖全局主题(推荐)

你可以按照mui文档中的说明来覆盖mui文档中的全局主题
在大多数情况下，你会使用 CSSBaseLine 。因此，这是我在主题配置中实现的解决方案：

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: `
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #fa0000 inset !important;
}`,
    },
  },
});