如何在Slate中有条件地设置表格单元、行或列的样式？

import { Editor, Transforms } from 'slate';

// 获取表格单元的样式
const getCellStyle = (editor, path) => {
  const [tableNode] = Editor.nodes(editor, {
    at: path,
    match: n => n.type === 'table',
  });

  if (tableNode) {
    const [table] = tableNode;
    const [row] = Editor.nodes(editor, {
      at: path,
      match: n => n.type === 'table-row',
    });

    if (row) {
      const [rowNode] = row;
      const cell = rowNode.cells[path[1]];

      if (cell) {
        return cell.style;
      }
    }
  }

  return null;
};

// 设置表格单元的样式
const setCellStyle = (editor, path, style) => {
  const [tableNode] = Editor.nodes(editor, {
    at: path,
    match: n => n.type === 'table',
  });

  if (tableNode) {
    const [table] = tableNode;
    const [row] = Editor.nodes(editor, {
      at: path,
      match: n => n.type === 'table-row',
    });

    if (row) {
      const [rowNode, rowPath] = row;
      const cell = rowNode.cells[path[1]];

      if (cell) {
        const newCell = { ...cell, style };
        Transforms.setNodes(editor, newCell, { at: [...rowPath, path[1]] });
      }
    }
  }
};

// 在条件渲染器中设置表格单元的样式
const renderCell = (editor, path) => {
  const style = getCellStyle(editor, path);

  if (style) {
    // 根据条件判断是否应用样式
    if (style.someCondition) {
      return <td style={{ backgroundColor: 'red' }}>{children}</td>;
    }
  }

  return <td>{children}</td>;
};

// 在表格组件中使用条件渲染器
const Table = ({ editor, node }) => {
  const { children } = node;

  return (
    <table>
      <tbody>
        {children.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.children.map((cell, cellIndex) => (
              <RenderCell
                key={cellIndex}
                editor={editor}
                path={[node.key, rowIndex, cellIndex]}
              >
                {cell.children}
              </RenderCell>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};