Javascript antd表格行选择中“全选”复选框的自定义样式

我使用AntdUI库创建了一个表，并使用表组件的道具实现了一个全选复选框

我的行选择如下所示

const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === "Disabled User",
      // Column configuration not to be checked
      name: record.name,
    }),
  };

一切都很完美。但是当选择所有行时，标题处的复选框也显示为选中。这很好，但我想在“全选”复选框中使用“-”符号，而不是“选中”符号。我该怎么做

我可以使用

columnTitle

prop呈现自定义复选框，如下所示

const rowSelection = {
        columnTitle: selectedRowKeys.length > 0 ? <div>custom checkbox</div> : <></>,
        onChange: (selectedRowKeys: any, selectedRows: any) => {
          setSelectedRows(selectedRows);
        },
        getCheckboxProps: (record: any) => ({
          disabled: record.name === "Disabled User",
          // Column configuration not to be checked
          name: record.name,
        }),
      };

const行选择={
columnTitle:selectedRowKeys.length>0？自定义复选框：，
onChange：（selectedRowKeys:any，selectedRowKeys:any）=>{
设置selectedRows（selectedRows）；
},
getCheckboxProps：（记录：任意）=>({
已禁用：record.name==“已禁用的用户”，
//不检查列配置
name:record.name，
}),
};

---

但随后它将失去“全选”功能。如何解决此问题？

看起来您必须使用css解决此问题

    thead tr th:first-child .ant-checkbox-inner::after {
      position: relative;
      color: black;
      border: none;
      width: 25px;
      height: 25px;
      background: transparent;
      transform: none;
      top: 0%;
      content: '-';
    }

---

请创建一个工作片段。