如何在React中通过独立CSS文件覆盖Material UI默认CSS属性？

核心思路：提升CSS选择器优先级 #

Material UI组件的默认样式通过CSS-in-JS生成，优先级较高。要覆盖这些样式，你需要编写优先级更高的CSS选择器，同时确保自定义CSS文件在Material UI样式之后加载。

具体实现步骤 #

1. 调整CSS文件加载顺序

在React项目入口文件（如index.js）中，保证自定义CSS文件在Material UI样式之后引入：

// 先引入Material UI全局样式（如果有）
import '@mui/material/styles';
// 再引入你的自定义表样式文件
import './custom-table-styles.css';

2. 针对各组件编写覆盖样式

以下是针对Table及其子组件的常见样式覆盖示例，可按需修改：

覆盖Table整体样式

/* 修改Table的边框与间距 */
.MuiTable-root {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e0e0e0;
}

覆盖TableHead的背景与文字样式

/* 设置TableHead背景色 */
.MuiTableHead-root {
  background-color: #f5f5f5;
}

/* 调整表头单元格的文字样式与边框 */
.MuiTableHead-root .MuiTableCell-root {
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #ddd;
}

覆盖TableCell的内边距与对齐方式

/* 统一所有TableCell的内边距与对齐 */
.MuiTableCell-root {
  padding: 12px 16px;
  text-align: left;
}

/* 单独调整表头单元格的上下内边距 */
.MuiTableCell-head {
  padding-top: 16px;
  padding-bottom: 16px;
}

覆盖TableRow的行高与hover效果

/* 设置普通行的行高 */
.MuiTableRow-root {
  height: 56px;
}

/* 行hover时的背景色 */
.MuiTableRow-root:hover {
  background-color: #fafafa;
}

/* 添加奇数行斑马纹效果 */
.MuiTableRow-root:nth-of-type(odd) {
  background-color: #f9f9f9;
}

3. 特殊情况：临时使用!important（仅必要时）

如果某些样式始终无法覆盖，可临时用!important强制提升优先级，但不建议大量使用，避免样式混乱：

.MuiTableCell-root {
  padding: 10px !important;
}

验证样式生效 #

打开浏览器开发者工具（F12），定位到目标元素，检查Styles面板，确认自定义样式已覆盖Material UI默认样式（自定义样式会显示在上方并带有勾选标记）。

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