Ant中修改Table的标题背景颜色

原组件直接使用效果

现在需要修改标题title样式 需要用到 components API
 

// 定义要覆盖默认的 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}
 />

效果