React MUI5：如何全局重写InputBase样式且不影响其他组件

你遇到的问题本质是：MUI里的<TextField />和<OutlinedInput />都是基于<InputBase />封装的派生组件，它们的DOM结构会继承MuiInputBase-root类，所以直接全局修改MuiInputBase的样式会自动传递给这些派生组件。下面给你几种靠谱的解决方法：

方法一：给InputBase加自定义类名（全局主题内实现） #

给所有需要自定义样式的<InputBase />添加专属类名，然后在主题样式里仅针对这个类名生效：

1. 使用InputBase时添加自定义类：

<InputBase className="custom-input-base" />

2. 修改全局主题配置：

MuiInputBase: {
  styleOverrides: {
    root: {
      '&.custom-input-base.Mui-focused': {
        borderBottom: '1px solid #2660BE',
      },
      '&.custom-input-base.Mui-error': {
        borderBottom: '1px solid #EB0202',
        color: '#EB0202',
      },
    },
  },
},

这种方式精准控制只有带custom-input-base类的InputBase会被修改，不会影响其他派生组件。

方法二：使用Styled Components创建自定义InputBase #

直接封装一个专属的InputBase组件，完全隔离样式，是最稳妥的方式：

import { InputBase } from '@mui/material';
import styled from '@mui/material/styles/styled';

const CustomInputBase = styled(InputBase)(({ theme }) => ({
  '&.Mui-focused': {
    borderBottom: '1px solid #2660BE',
  },
  '&.Mui-error': {
    borderBottom: '1px solid #EB0202',
    color: '#EB0202',
  },
}));

之后在项目里用<CustomInputBase />代替原生的<InputBase />即可，完全不会干扰TextField、OutlinedInput的样式。

方法三：全局样式中排除派生组件（不推荐，健壮性差） #

通过CSS选择器排除TextField和OutlinedInput的父类，但如果后续有其他InputBase派生组件，可能会漏处理：

MuiInputBase: {
  styleOverrides: {
    root: {
      // 排除TextField和OutlinedInput内部的InputBase
      ':not(.MuiTextField-root &):not(.MuiOutlinedInput-root &).Mui-focused': {
        borderBottom: '1px solid #2660BE',
      },
      ':not(.MuiTextField-root &):not(.MuiOutlinedInput-root &).Mui-error': {
        borderBottom: '1px solid #EB0202',
        color: '#EB0202',
      },
    },
  },
},

优先推荐前两种方法，尤其是Styled Components的方式，代码更清晰，维护性更强。

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