Antdesign里面Table组件展开/折叠（同时设置了行间距和每一行的圆角）

import { Table, Space, Badge } from "antd";
import { DownOutlined,UpOutlined } from "@ant-design/icons";
import React, {useState} from "react";
import './index.css'

export default function TableStudy() {
  const [expandedRowKeys, setExpandedRowKeys] = useState([])
  const rowExpandable = (record) => {
    return Array.isArray(record.children) && record.children.length
  }
  const data = [
    {
      uid: "1001",
      grade: "一年级",
      className: "1班",
      children: [
        {
          uid: "100101",
          name: "张三",
          age: 10,
          sex: "男",
        },
        {
          uid: "100102",
          name: "李四",
          age: 12,
          sex: "男",
        },
        {
          uid: "100103",
          name: "王婷",
          age: 11,
          sex: "女",
        },
      ],
    },
    {
      uid: "1002",
      grade: "二年级",
      className: "2班",
      children: [],
    },
    {
      uid: "1003",
      grade: "二年级",
      className: "3班",
      children: [],
    },
  ];
  const expandedRowRender = (record) => {
    const columns = [
      { title: "性别", dataIndex: "sex", key: "sex" },
      { title: "年龄", dataIndex: "age", key: "age" },
      { title: "姓名", dataIndex: "name", key: "name" },
      {
        title: "Action",
        key: "operation",
        render: () => (
          <Space size="middle">
            <a>Pause</a>
            <a>Stop</a>
          </Space>
        ),
      },
    ];
    return (
      <Table
        columns={columns}
        dataSource={record.children}
        pagination={false}
      />
    );
  };
  const columns = [
    {
      title: "年级",
      dataIndex: "grade",
    },
    {
      title: "班级",
      dataIndex: "className",
    },
  ];
  const handleExpandClick = (expanded, uid) => {
    let tempKeys = expandedRowKeys.slice(0)
    if(expanded) {
      tempKeys.push(uid)
    } else {
      tempKeys = tempKeys.filter(ele=> ele !== uid)
    }
    setExpandedRowKeys(tempKeys)
  }
  return (
    <Table
      rowClassName="row-class"
      childrenColumnName="noChildren"
      columns={columns}
      dataSource={data}
      rowKey="uid"
      tableLayout=""
      expandable={{
        rowExpandable: (record) => {
          return rowExpandable(record)
        },
        expandedRowRender: (record) => {
          return expandedRowRender(record);
        },
        expandedRowKeys: expandedRowKeys,
        onExpand: (expanded,record) => {
          handleExpandClick(expanded, record.uid)
        },
        expandIcon: (props) => {
          const {record,expanded} = props
          if(rowExpandable(record)) {
            if(expanded) {
              return <UpOutlined onClick={()=>{handleExpandClick(false,record.uid)}} />
            }
            return <DownOutlined onClick={()=>{handleExpandClick(true,record.uid)}} />
          } else {
            return ''
          }
        },
        expandRowByClick: true,
      }}
    />
  );
}

table{
    border-spacing: 0 4px !important;
}
.row-class{
    background: purple;
}
.row-class>td:first-child{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.row-class>td:last-child{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.row-class:hover{
    background: purple !important;
}