如何修改MUI <Input>组件聚焦状态下的底部栏颜色？

要修改MUI <Input> 组件聚焦时的底部栏颜色，你可以通过sx属性直接覆盖组件的内置样式，无需额外查找类名，针对底部栏的不同状态，对应以下伪元素选择器：

• &:before：控制未聚焦状态下的底部栏样式
• &:after：控制聚焦状态下的底部栏样式
• &:hover:not(.Mui-disabled):before：控制 hover 状态下的底部栏样式（可选）

以下是修改后的完整代码示例：

<Input
  id="email"
  type="email"
  placeholder="Enter your email"
  className='mr-10'
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  sx={{
    '&:before': {
      borderBottomColor: '#ccc', // 未聚焦时的底部栏颜色
    },
    '&:after': {
      borderBottomColor: '#2196f3', // 替换为你需要的聚焦状态底部栏颜色
    },
    '&:hover:not(.Mui-disabled):before': {
      borderBottomColor: '#999', // hover时的底部栏颜色（按需调整）
    }
  }}
/>

原理说明 #

MUI的Input组件底部栏是通过CSS伪元素::before和::after实现的：未聚焦时显示::before的样式，聚焦时会切换为::after的样式，直接在sx属性中覆盖这些伪元素的borderBottomColor属性，即可实现自定义颜色效果。

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