覆盖MaterialUI内置类的CSS全局生效，如何仅作用于特定React组件

你遇到的问题是直接使用全局CSS选择器匹配MUI内置类，导致样式全局生效，可通过以下三种方案解决：

方案1：增加自定义父类限定作用范围 #

通过提高选择器专属度，让样式仅匹配带指定自定义类的组件下的MUI表格：

1. 在目标TableOne组件的根节点或Table组件上添加自定义类：

import './TableOne.css'
import { Table, TableBody } from '@mui/material'

function TableOne() {
  return (
    {/* 给当前组件专属容器加自定义类 */}
    <div className="table-one-wrapper">
      <Table>
        <TableBody>
          {/* 表格内容 */}
        </TableBody>
      </Table>
    </div>
  )
}

2. 修改TableOne.css，给选择器增加自定义类前缀：

@media (min-width:601px) and (max-width: 960px) {
  /* 只有.table-one-wrapper下的MUI表格才会命中该样式 */
  .table-one-wrapper .MuiTable-root .MuiTableBody-root{
    display: flex !important;
    justify-content: center !important ;
    flex-wrap: wrap !important; 
    row-gap: 15px;
  }
}

方案2：使用CSS Modules实现样式隔离 #

React原生支持的局部样式方案，会自动将自定义类名转换为带哈希值的唯一类名，完全避免全局冲突：

1. 将CSS文件重命名为TableOne.module.css，修改内容如下：

@media (min-width:601px) and (max-width: 960px) {
  .customTable .MuiTable-root .MuiTableBody-root{
    display: flex !important;
    justify-content: center !important ;
    flex-wrap: wrap !important; 
    row-gap: 15px;
  }
}

2. 在组件中导入使用：

// 导入module.css生成的样式对象
import styles from './TableOne.module.css'
import { Table, TableBody } from '@mui/material'

function TableOne() {
  return (
    <div className={styles.customTable}>
      <Table>
        <TableBody>
          {/* 表格内容 */}
        </TableBody>
      </Table>
    </div>
  )
}

方案3：使用MUI官方样式方案（推荐） #

MUI v5及以上版本推荐使用styled API创建自定义组件，天然样式隔离，优先级足够的情况下可省略!important：

import { styled } from '@mui/material/styles'
import { Table, TableBody } from '@mui/material'

// 创建专属自定义Table组件，样式仅作用于该组件
const StyledTable = styled(Table)(({ theme }) => ({
  [theme.breakpoints.between('sm', 'md')]: {
    '& .MuiTableBody-root': {
      display: 'flex',
      justifyContent: 'center',
      flexWrap: 'wrap',
      rowGap: '15px'
    }
  }
}))

function TableOne() {
  return (
    <StyledTable>
      <TableBody>
        {/* 表格内容 */}
      </TableBody>
    </StyledTable>
  )
}

内容的提问来源于stack exchange，提问作者venkata sai injarapu