Material-UI v1 Input组件聚焦样式类名覆盖方法咨询

阿华AIGC实验室

2026-5-19

如何用类名覆盖Material-UI v1 Input组件的聚焦样式

嘿，我来帮你搞定这个问题！在Material-UI v1里，想要通过类名覆盖Input组件的聚焦样式，核心是利用MUI的样式优先级规则，针对聚焦状态的选择器来写自定义样式就行。下面给你两种常用的实现方式，你可以根据自己的组件类型（类组件/函数组件）来选：

方法一：用withStyles包装组件（适合类组件）

这种方式是把Input组件用withStyles高阶组件包装，直接在样式对象里定义聚焦状态的样式：

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';

// 定义自定义样式
const StyledInput = withStyles({
  root: {
    // 针对聚焦状态的样式
    '&:focused': {
      // 例1：修改输入框文本颜色
      color: '#2ecc71',
      // 例2：修改下划线颜色（默认Input的下划线是:after伪元素）
      '&:after': {
        borderBottomColor: '#e74c3c',
        borderBottomWidth: '2px',
      },
      // 也可以改背景色
      backgroundColor: '#f8f9fa',
    },
  },
})(Input);

// 使用自定义的Input组件
class MyForm extends React.Component {
  render() {
    return <StyledInput placeholder="试试聚焦我！" />;
  }
}

方法二：用makeStyles创建样式（适合函数组件）

如果是函数组件，用makeStyles钩子来创建样式，然后把类名传给Input的className属性：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';

const useStyles = makeStyles({
  customInput: {
    '&:focused': {
      // 自定义聚焦时的样式
      '&:after': {
        borderBottomColor: '#3498db',
      },
      fontWeight: 'bold',
    },
  },
});

function MyForm() {
  const classes = useStyles();
  return <Input className={classes.customInput} placeholder="聚焦看看效果！" />;
}

特殊情况：如果用的是Outlined变体的Input

如果你用的是variant="outlined"的Input，它的边框是由notchedOutline类控制的，这时候需要结合MUI的focused类来选择：

const StyledOutlinedInput = withStyles({
  root: {
    // 选择聚焦状态下的notchedOutline元素
    '&$focused $notchedOutline': {
      borderColor: '#9b59b6',
      borderWidth: '2px',
    },
  },
  // 必须声明这两个类，才能在样式里引用
  focused: {},
  notchedOutline: {},
})(Input);

// 使用时加上variant属性
<StyledOutlinedInput variant="outlined" placeholder="Outlined输入框" />

关键要点：