MUI Typography表格样式定制：清除Wrapper嵌套表格默认样式

方法1：利用CSS优先级+all: unset重置样式 #

在Wrapper的sx属性中，通过嵌套选择器直接针对内部表格元素重置所有继承样式，再定义新样式。all: unset可以快速清除元素的所有继承样式和默认样式，相当于从零开始构建样式：

const Wrapper = ({ children }) => (
  <div sx={{
    '& table': {
      all: 'unset', // 彻底清除默认/继承样式
      // 以下是自定义新样式示例
      borderCollapse: 'collapse',
      width: '100%',
      backgroundColor: '#f5f5f5',
    },
    '& th, & td': {
      all: 'unset',
      border: '1px solid #ddd',
      padding: '12px',
      textAlign: 'center',
    }
  }}>
    {children}
  </div>
);

方法2：通过上下文区分表格场景 #

借助React上下文，让自定义表格组件判断自身是否被Wrapper包裹，动态切换渲染逻辑：

import { createContext, useContext } from 'react';

// 创建上下文用于传递包裹状态
const TableWrapperContext = createContext(false);

// 自定义表格组件
const CustomTable = (props) => {
  const isWrapped = useContext(TableWrapperContext);
  
  if (isWrapped) {
    // 被Wrapper包裹时的样式
    return (
      <div sx={{
        table: {
          borderCollapse: 'separate',
          borderSpacing: '0 8px',
          // 其他专属样式
        }
      }}>
        {props.children}
      </div>
    );
  }
  // 普通表格样式
  return <Typography variant="table">{props.children}</Typography>;
};

// Wrapper组件提供上下文
const Wrapper = ({ children }) => (
  <TableWrapperContext.Provider value={true}>
    <div>{children}</div>
  </TableWrapperContext.Provider>
);

方法3：全局CSS类名定向重置 #

给Wrapper添加专属类名，在全局CSS中针对该类名下的表格进行样式重置：

// Wrapper组件
const Wrapper = ({ children }) => (
  <div className="wrapped-table-container">{children}</div>
);

全局CSS文件中：

.wrapped-table-container table {
  all: unset;
  /* 自定义新样式 */
  width: 100%;
  border: 2px solid #222;
}

.wrapped-table-container th,
.wrapped-table-container td {
  all: unset;
  padding: 10px;
  border-bottom: 1px solid #222;
}

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