如何解决Material UI(MUI-React)中Chrome自动填充覆盖输入框占位符的问题？

输入框的占位符文本（Email address、Password）被Chrome浏览器的autofill覆盖，可通过以下CSS设置禁用自动填充状态下的占位符颜色来解决：

核心解决方案代码 #

/* 隐藏Chrome自动填充时的占位符 */
input:-webkit-autofill::placeholder {
  color: transparent !important;
  /* 替代方案：设置为输入框背景色，比如输入框背景是白色则用#ffffff */
  /* color: #ffffff !important; */
}

/* 保留普通状态的占位符样式（可选，根据你的需求调整） */
input::placeholder {
  color: #999;
}

额外处理：消除Chrome自动填充的黄色背景（可选） #

Chrome自动填充输入框时默认会添加黄色背景，如果你需要去掉这个样式，可补充以下代码：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  /* 用自定义背景色覆盖默认黄色，这里替换成你的输入框背景色 */
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

原理说明：通过:-webkit-autofill::placeholder伪类组合，精准定位到Chrome自动填充状态下的输入框占位符，将其颜色设为透明或与背景同色，这样占位符就不会和自动填充的内容重叠显示，从视觉上解决覆盖问题。

内容的提问来源于stack exchange，提问作者guest