如何在外部覆盖React自定义MUI组件的CSS？css类名解析

一、不修改SearchBox组件，外部覆盖内部Box和TextField样式 #

以下是几种无需改动SearchBox源码的可行方法：

1. 使用MUI styled高阶组件包裹SearchBox #

通过styled创建样式化组件，利用后代选择器定位内部MUI组件：

import { styled } from '@mui/material/styles';
import SearchBox from './你的SearchBox路径';

const StyledSearchBox = styled(SearchBox)`
  // 覆盖内部Box样式
  & .MuiBox-root {
    padding: 1rem;
    background-color: #f5f5f5;
  }

  // 覆盖内部TextField样式
  & .MuiTextField-root {
    width: 400px;
    // 进一步覆盖TextField输入框细节
    & .MuiOutlinedInput-root {
      border-radius: 8px;
      &:hover fieldset {
        border-color: #1976d2;
      }
    }
  }
`;

// 调用样式化后的组件
<StyledSearchBox handle={Keyword} />

2. 直接通过sx属性传递样式（推荐） #

若SearchBox会将外部传入的sx属性传递给最外层容器，可直接在调用时用sx写后代选择器：

<SearchBox 
  handle={Keyword}
  sx={{
    '& .MuiBox-root': {
      padding: 2, // MUI spacing单位，等价于16px
      marginBottom: 1,
    },
    '& .MuiTextField-root': {
      width: '100%',
      '& .MuiOutlinedInput-root': {
        borderRadius: 1,
        '&.Mui-focused fieldset': {
          borderWidth: 2,
        },
      },
    },
  }}
/>

3. 使用全局样式（不推荐，易冲突） #

若上述方法不适用，可在全局CSS中通过后代选择器定位，需添加足够特异性避免影响其他组件：

/* 全局CSS文件 */
.custom-search-box .MuiBox-root {
  padding: 16px;
}
.custom-search-box .MuiTextField-root {
  width: 300px;
}

调用时给SearchBox添加className：

<SearchBox handle={Keyword} className="custom-search-box" />

二、关于浏览器中看到的css-1uqe0j类名 #

这类类名是MUI的CSS-in-JS样式引擎（如Emotion或Styled Components，取决于MUI版本）自动生成的唯一哈希类名，核心作用：

• 避免样式冲突：每个组件样式对应独一无二的类名，防止不同组件样式互相干扰
• 隔离作用域：样式仅作用于目标组件元素，不会污染全局样式
• 动态生成：默认每次构建会生成不同字符串（可配置稳定类名），确保样式唯一性

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