无法修改Material-UI中TableCell组件边框颜色问题求助

云上老周

2026-9-23

解决方案

首先确认你使用的Material-UI版本：
如果你使用的是v5及以上版本，原v4的overrides配置已迁移至components字段下的styleOverrides，原根路径下的overrides不再生效，调整后的配置如下：

const theme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          borderBottom: '1px solid #ff0000',
        },
        // 如果是粘性表头不生效，可补充head配置针对性修改
        head: {
          borderBottom: '1px solid #ff0000',
        }
      },
    },
  },
})

检查主题是否正确挂载：必须用ThemeProvider包裹表格所在的组件树，配置才能生效，示例用法：

import { createTheme, ThemeProvider } from '@mui/material/styles';

// 此处放置上方的theme定义

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 此处放置你的Table组件 */}
    </ThemeProvider>
  )
}

排查样式优先级冲突：如果项目内存在行内样式、styled组件自定义样式、CSS Modules样式优先级更高的情况，会覆盖主题配置，可以临时加!important验证是否是优先级问题：
```
borderBottom: '1px solid #ff0000 !important',
```
确认是优先级问题后，调整对应自定义样式的权重即可。