如何移除MUI Input组件的下划线（底部边框）？

• 排查样式覆盖问题：大多数自定义CSS不生效的情况，要么是只修改了输入框默认状态的样式，没有覆盖hover、focus、active等交互状态的样式，要么是组件库自带样式的优先级高于你写的自定义样式。可以给Input绑定自定义类名后用高权重CSS全状态覆盖：

/* 自定义类名可自行修改 */
.input-no-border,
.input-no-border:hover,
.input-no-border:focus,
.input-no-border:active {
  border-bottom: none !important;
  outline: none !important;
  /* 部分组件库用box-shadow实现下划线效果，需同步清除 */
  box-shadow: none !important;
}

组件调用写法：
<Input type="text" className="input-no-border" />

• 如果你使用的是Ant Design、Element UI等主流组件库，直接调用组件自带的关闭边框属性即可，无需额外写CSS：
  • Ant Design：添加bordered={false}属性，代码为<Input type="text" bordered={false} />
  • Element UI：添加:border="false"属性，代码为<Input type="text" :border="false" />
• 临时兜底方案：直接绑定行内样式强制覆盖默认样式：
  <Input type="text" style={{borderBottom: 'none', outline: 'none', boxShadow: 'none'}} />

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