如何修改表格行边框（antd）？答案

【问题标题】：How to modify table row borders (antd)?如何修改表格行边框（antd）？
【发布时间】：2021-07-26 18:12:30
【问题描述】：

我正在使用来自 ant design 的树表组件来显示报告。

我想为折叠的父级或最后一个展开的子级设置底部边框，以便将报表拆分为各个部分。

现状对比。期望的效果

理想情况下，我需要一种通过表数据源中的属性设置 css 类名的方法。

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案1】：

您可以自定义 JSX 标签中的 className 并添加 css 属性可以在检查中找到目标className

.customizeClassName { :global { .targetAntdClassName { 边框：无 } } }

【讨论】：

【解决方案2】：

所有边框属性都不会在关卡中起作用。他们必须在水平上。所以，仅仅给出一个修改边框的类名是行不通的。

一种解决方法是使用 Antd 的“rowClassName”属性设置一个类名（这可以设置为一个动态返回类名的函数）。

然后，分配以下类：

.highlight-bottom-border > td {
  border-bottom: solid 1px black !important
}

.highlight-top-border > td {
  border-top: solid 2px black !important;
  border-bottom: solid 2px #6d9eff !important
}

通过这样做，级别会被修改，从而产生更明确的边界。

【讨论】：