react+antd表格如何给单元格设置样式？

目前我的解决办法就是 把columns这个数组放到函数组件内部 然后不使用Column组件 直接渲染Table 所有的操作都在columns数组里面操作 具体代码我复制在下面 希望以后刚接手react项目的朋友能用到

// 函数式组件
const Plat = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editTarget, setEditTarget] = useState({}); // 编辑的数据
  const columns = [
    {
      title: "平台类型",
      label: "平台类型",
      key: "platform",
      dataIndex: "platform",
      options: {
        1: "ADSAAS",
        2: "T-TASK",
      },
      align: "center",
    },
    {
      title: "公告标题",
      align: "center",
      label: "公告标题",
      key: "title",
      dataIndex: "title",
    },
    {
      title: "公告内容",
      align: "center",
      label: "公告内容",
      key: "content",
      dataIndex: "content",
      onCell: () => {
        return {
          style: {
            maxWidth: 200,
            overflow: "hidden",
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
            cursor: "pointer",
          },
        };
      },
      render: (_, item) => (
        <Tooltip placement="topLeft" title={item?.content || "-"}>
          {item?.content || "-"}
        </Tooltip>
      ),
    },
    {
      title: "公告状态",
      align: "center",
      label: "公告状态",
      key: "status",
      dataIndex: "status",
      options: {
        1: "待发布",
        2: "已发布",
      },
      onCell: (record, index) => {
        if (record.status === "待发布") {
          return { className: "cell-class" };
        }
        return { className: "cell-green" };
      },
    },
    {
      title: "是否置顶",
      align: "center",
      label: "是否置顶",
      key: "is_top",
      dataIndex: "is_top",
      onCell: (record, index) => {
        // console.log(record, index, "12sdafasf");
        if (record.is_top === "是") {
          return { className: "cell-class" };
        }
        return { className: "" };
      },
      options: {
        1: "是",
        2: "否",
      },
    },
    {
      title: "添加时间",
      align: "center",
      label: "添加时间",
      key: "create_time",
      dataIndex: "create",
      options: {},
    },
    {
      title: "操作",
      label: "操作",
      key: "action",
      align: "center",
      render: (record) => (
        <label>
          <Button type="primary" onClick={() => edit(record)}>
            编辑
          </Button>
          <Divider type="vertical" />
          {/* <Button onClick={()=>showModal(record)} > 删除</Button> */}
          <Button type="primary" danger onClick={() => delMonitor(record)}>
            {" "}
            删除
          </Button>
        </label>
      ),
    },
  ];
  let timer = null;
  // mounted
  useEffect(() => {
    getNoticelist();
    return () => {
      clearTimeout(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const getNoticelist = async () => {
    try {
      setLoading(true);
      const res = await $api.getNoticelist({ page: 1, limit: 1000 });
      let data = res;
      data.forEach((element) => {
        element.create = moment(element.create_time * 1000).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        element.is_top = element.is_top === 1 ? "是" : "否";
        element.status = element.status === 1 ? "待发布" : "已发布";
        element.platform = element.platform === 1 ? "ADSAAS" : "T-TASK";
      });
      setList(data);
      timer = setTimeout(() => {
        setLoading(false);
      }, 1000);
    } catch (error) {
      setLoading(false);
      console.log(this.error);
    }
  };

  // 新增
  const showModal = () => {
    setEditTarget({});
    setIsModalVisible(true);
  };
  // 删除
  const delMonitor = (data) => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: <span>该操作将删除该公告, 是否继续?</span>,
      onOk: async () => {
        try {
          const res = await $api.deleteRemoveNoticelist({ id: data.id });
          message.success(res.msg);
          getNoticelist();
        } catch (error) {
          message.error(error.msg);
        }
      },
    });
  };
  // 编辑
  const edit = (data) => {
    let editData = JSON.parse(JSON.stringify(data));
    for (const key in editData) {
      if (editData.hasOwnProperty(key)) {
        editData[key] = editData[key].toString();
      }
    }
    setEditTarget(editData);
    setIsModalVisible(true);
  };

  // 接受子组件数据 点击取消的时候关闭弹窗
  const getState = (val) => {
    setIsModalVisible(val);
    // 不知道为什么这个事件就是子传父 刷新接口 新增和删除的时候就实时更新了
    getNoticelist();
  };
  return (
    <div className="nav_contione">
      <div className="header-wrap">
        <Button type="primary" onClick={showModal} className="btn">
          新增公告
        </Button>
      </div>
      <label>
        <Row gutter={16} className="gutter-row">
          <Col md={24}>
            <Card title="首页公告列表" bordered={false}>
              <Table
                bordered
                columns={columns}
                dataSource={list}
                loading={loading}
                rowKey={(record) => record.create_time}
              />
            </Card>
          </Col>
        </Row>
        {/* {isModalVisible && <ModalData  />} */}
      </label>
      {/* model */}
      <PlatModule
        isModalVisible={isModalVisible}
        columns={columns}
        cbState={getState}
        editTarget={editTarget}
      />
    </div>
  );
};