Ant-design的Table组件在不修改theme的情况下改变背景颜色

Ant Design的Table组件由以下几个主要元素组成：

表格(Table) - 整个表格组件的容器，包含表头和表体。
表头(Table Header) - 表格的顶部部分，用于显示表格的列名。
表体(Table Body) - 表格的主体部分，用于显示表格的数据行。
表行(Table Row) - 表格中的一行，包含若干个表格单元格。
表头单元格(Table Header Cell) - 表头中的一个单元格，显示列名。
数据单元格(Data Cell) - 表体中的一个单元格，显示数据值。
除了以上核心元素，Ant Design的Table组件还支持其他一些元素和功能，例如：

分页(Pagination) - 用于分页显示数据。
排序(Sorting) - 允许用户对表格数据进行排序。
过滤(Filtering) - 允许用户根据条件过滤表格数据。
选择(Selection) - 允许用户选择表格中的行或单元格。
拖动(Dragging) - 允许用户拖动表头来重新排序列的顺序。
这些元素和功能使Ant Design的Table组件成为一个强大且高度可定制的表格解决方案。

// 定义要覆盖默认的 table 背景元素的组件
  const components = {
    table: (props:any) => {
      const { style } = props;
      const customStyle = {
        ...style,
        backgroundColor: "#003366", // 设置表格的背景颜色
        color:'#ffffff'
      };
      return <table {...props} style={customStyle} />;
    },
    header: {
      // 自定义头部行组件
      wrapper: (props:any) => (
        <thead style={{ background: '#0099cc' ,color:'#ffffff'}}>
          {props.children}
        </thead>
      ),
    },
  };

 

<Table
  columns={columnsroller}
  onChange={onChangeroller} 
  components={components}//这里引入覆盖样式
  dataSource={dataroller}
 />