React中修改Material-UI v5表格分页样式不影响其他组件的方法

• 直接全局覆盖.MuiToolbar-root、.MuiTableCell-root类名未做作用域隔离，会匹配页面所有用到该类的组件，必然导致顶部AppBar的Toolbar样式被异常修改
• 自定义的overrides样式类未绑定到分页组件根节点，加上MUI v5默认内置样式优先级高于普通CSS类，导致配置的宽高、颜色属性不生效
• 传入TblPagination的自定义Toolbar存在语法错误：style属性写在了div标签外部，且直接替换原生Toolbar组件时未透传props和子元素，会丢失分页内置的行数选择、页码切换等默认功能

通过组件级作用域嵌套选择器实现样式隔离，所有自定义样式仅作用于当前表格，不会污染全局其他组件，步骤如下：

1. 调整样式配置 #

修改useStyles配置，删除未绑定的overrides字段，新增表格包裹层的作用域类，在类内部通过嵌套选择器仅选中当前表格下的分页、单元格组件：

const useStyles = makeStyles(theme => ({
  // 新增表格区域作用域类
  tableScope: {
    // 仅匹配当前作用域下的分页根组件
    '& .MuiTablePagination-root': {
      width: '960px',
      height: '35px',
      backgroundColor: '#a9aeb3',
      color: 'rgb(41, 39, 39)',
      fontFamily: 'Arial, Helvetica, sans-serif',
      fontWeight: 700,
      // 仅匹配当前分页组件内部的Toolbar，完全不影响AppBar的Toolbar
      '& .MuiToolbar-root': {
        minHeight: '35px !important',
        paddingLeft: theme.spacing(1),
        paddingRight: theme.spacing(1)
      }
    },
    // 仅匹配当前作用域下的表格单元格，调整内边距不影响其他页面表格
    '& .MuiTableCell-root': {
      padding: '6px 16px' // 按需修改为需要的内边距值即可
    }
  },
  pageContent: {
    margin: theme.spacing(1),
    padding: theme.spacing(3)
  },
  searchInput: {
    width: '50%'
  },
  newButton: {
    position: 'absolute',
    right: '0px'
  }
}));

2. 调整渲染结构 #

给表格和分页组件的公共父节点绑定上面的作用域类，删除之前写错的自定义Toolbar传参：

<Paper className={classes.pageContent}>
  {/* 原有搜索框、新增按钮的Grid代码保持不变 */}
  {/* 给表格+分页的公共父节点绑定作用域类 */}
  <div className={classes.tableScope}>
    <TblContainer>
      <TblHead />
      <TableBody>
        {/* 原有表格行渲染逻辑保持不变 */}
        {
          recordsAfterPagingAndSorting().map(item =>
            (<TableRow key={item.id}>
              {/* 单元格内容保持不变 */}
            </TableRow>)
          )
        }
      </TableBody>
    </TblContainer>
    {/* 移除错误的components自定义Toolbar配置，直接渲染分页即可 */}
    <TblPagination />
  </div>
</Paper>

补充说明 #

• 如果发现样式优先级不够被MUI默认样式覆盖，可将@mui/styles的makeStyles替换为MUI v5官方推荐的styledAPI或sx属性，默认样式优先级更高，不需要加!important
• 若需要单独调整表头、表体的单元格样式，可将选择器替换为& .MuiTableCell-head、& .MuiTableCell-body做细粒度控制
• 禁止在全局CSS文件中直接写.MuiToolbar-root、.MuiTableCell-root这类通用类名选择器，必然会造成全局样式污染

内容的提问来源于stack exchange，提问作者Flavio Rocha 2018