如何正确移除Material UI文本输入框的悬停黑色边框？

你之前的写法直接把border设为none，会把边框的宽度、样式都清掉，自然就看不到边框了。正确的做法是只修改边框颜色，保留原本的边框宽度和样式。

Material UI的OutlinedInput组件在鼠标悬停时，会给内部的fieldset元素设置深色边框色，我们只需要把这个颜色覆盖成你想要的（比如和默认未悬停状态一致的颜色，或者自定义浅色）。

正确的CSS代码示例： #

& .MuiOutlinedInput-root {
    /* 保留你原本设置的聚焦时边框颜色 */
    &.Mui-focused fieldset {
        border-color: green;
    }
    /* 悬停时仅修改边框颜色，而非移除整个边框 */
    &:hover fieldset {
        border-color: rgba(0, 0, 0, 0.23); /* Material UI默认未悬停状态的边框色 */
        /* 也可以换成你自定义的颜色，比如#e0e0e0这类浅灰色 */
    }
}

补充说明： #

如果想让悬停时边框完全和初始状态无差异，直接复用默认色值rgba(0, 0, 0, 0.23)即可；要是需要自定义悬停样式，也可以单独调整border-width或border-style，但一般仅修改颜色就足够解决问题。

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