如何修复MUI TextField下拉菜单MenuItem的线条重叠问题

这种多轮廓线（尤其是底部那条）的问题，通常是样式冲突或错误状态处理不当导致的，以下是具体修复方案：

方案1：排查错误提示元素的样式干扰 #

你当前用<p className="error">显示错误信息，可能这个类的CSS设置了border-bottom、text-decoration: underline这类样式，和输入框底部轮廓视觉重叠。

修改.error的CSS，移除不必要的边框/下划线：

.error {
  border: none;
  text-decoration: none;
  color: #d32f2f;
  margin-top: 4px;
  font-size: 0.75rem;
}

方案2：用Material UI原生错误状态统一处理 #

Material UI的TextField自带错误状态样式，手动绑定error和helperText属性，替代自定义的错误提示元素，避免样式冲突：

<TextField
  select
  label="Gender"
  id="gender1"
  data-testid="gender1"
  {...register("gender1", {
    required: {
      value: true,
      message: "Gender is required",
    },
  })}
  // 绑定错误状态和提示文本
  error={!!errors.gender1}
  helperText={errors.gender1?.message}
/>

之后删除原来的<p className="error">元素，由Material UI统一渲染错误提示，保证样式一致性。

方案3：修复全局样式对组件的覆盖 #

如果全局CSS对input、div等元素设置了outline或border，会覆盖Material UI的默认样式。用开发者工具（F12）定位到轮廓元素，查看样式来源，然后针对性覆盖：

/* 恢复TextField默认边框样式 */
.MuiTextField-root .MuiOutlinedInput-notchedOutline {
  outline: none;
  border-color: rgba(0, 0, 0, 0.23);
}

/* 错误状态下的边框样式 */
.MuiTextField-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: #d32f2f;
}

快速验证步骤 #

1. 临时删除<p className="error">，看底部轮廓是否消失，确认是否是该元素的样式问题。
2. 用浏览器开发者工具选中输入框底部的线条，查看它的CSS规则来源，定位冲突样式。

内容的提问来源于stack exchange，提问作者D.Hodges