antd table 表格 循环滚动 css有问题 把 styles都删除掉 已测试

import React, { useEffect, useState } from 'react'
import styles from './style.css'
import { Table } from 'antd';

const dataSource = [
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
];

const columns = [
  {
    title: '策略名',
    dataIndex: 'grade',
    key: 'grade',
    // render: text => <div style={text == '重要' ? { background: 'linear-gradient(1deg, #E7474D 0%, #FF0042 100%)' } : { background: 'linear-gradient(180deg, #777C84 0%, #708293 100%)' }}><a>{text}</a></div>,
  },
  {
    title: '资源名',
    dataIndex: 'resource',
    key: 'resource'
  },
  {
    title: '用户列表',
    dataIndex: 'status',
    key: 'status',
    render: text => <div><div style={text == '未处理' ? { background: '#F01E2A' } : null}></div ><span>{text}</span></div>
  }
];

const Index = () => {
  const [timer, setTimer] = useState(null);  // 定时器
  // const [count, setCount] = React.useState(0)
  useEffect(() => {  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~
    // 如果有真实数据 请在数据请求后 调用此方法
    InitialScroll(dataSource)
    return () => {
      clearInterval(timer)
    }
  }, [])  // 检测数组内变量 如果为空 则监控全局
  // 开启定时器
  const InitialScroll = (data) => {
    let v = document.getElementsByClassName("ant-table-body")[0];
    if (data.length > 3)  // 只有当大于三条数据的时候 才会看起滚动
    {
      let time = setInterval(() => {
        v.scrollTop += 1.5;
        if (Math.ceil(v.scrollTop) >= parseFloat(v.scrollHeight - v.clientHeight)) {
          v.scrollTop = 0
          // setTimeout(() => { v.scrollTop = 0 }, 1000)
        }
      }, 100)
      setTimer(time)  // 定时器保存变量 利于停止
    }
  }

  return (
    <div>
      <div>
        <div onMouseEnter={() => {
          if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
          clearInterval(timer)
        }} onMouseLeave={() => {
          if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
          InitialScroll(dataSource)
        }}>
          <Table id="cyclicScroll" className="cyclicScrolls1" scroll={{ y: 200 }} dataSource={dataSource} columns={columns} pagination={false} />
        </div>
      </div>
    </div >
  )
}

export default Index

　　

.cyclicScrolls1 .ant-table-body{
  overflow: hidden;
}
.cyclicScrolls1 .ant-table-thead>tr{
  height: 10px!important;
}
.cyclicScrolls1 .ant-table-thead>tr>th{
  background: white;
  color: black!important;
  font-weight: 800!important;
}
.cyclicScrolls1 .ant-table-tbody>tr>td{
  height: 10px!important;
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table tfoot > tr > th, .ant-table tfoot > tr > td{
  padding: 8px 8px!important;
}
.overall {
  height: 162px;
  box-sizing: border-box;
}
.table {
  width: 100%;
  height: 100%;
}
/* 等级 */
.grade {
  margin: 0 auto;
  margin-top: -1px;
  font-weight: bold;
  width: 50px;
  height: 20px;
  border-radius: 2px;
  text-align: center;
  line-height: 18px;
}
.grade>.gradeA {
  font-size: 16px;
  color: #FFFFFF;
}
.statusBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.statusBox>.status {
  width: 6px;
  height: 6px;
  background: #6DE922;
  border-radius: 50%;
  margin-right: 5px;
}
.statusBox>.status>.statusSpan {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
}
.oddNumber {
  background: rgba(58, 90, 162, 0.1);
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  height: 38px;
  padding: 0px !important;
  font-family: "DINpro";
}
.evenNumbers {
  background: rgba(58, 90, 162, 0.33);
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  height: 38px;
  font-family: "DINpro";
}