如何样式化不可编辑的自定义React Row组件？

问题根源 #

这个Row组件的内边距由组件自身的padding props控制，而非标准的style属性。从源码可见，RowContainer的padding样式优先读取传入的padding参数，无参数时才使用默认值，因此直接传递style={{ padding: 0 }}不会生效。

解决方法 #

1. 利用组件暴露的padding props #

Row组件已明确支持padding参数，直接传入padding="0"即可覆盖默认内边距：

<Table.Row {...flexProps} className="TableRow" padding="0">
  {/* 你的内容 */}
</Table.Row>

2. 处理hover状态的内边距（可选） #

如果需要移除hover时的内边距变化，需同时传递hoverActive={false}，因为默认hover逻辑会修改paddingLeft：

<Table.Row {...flexProps} className="TableRow" padding="0" hoverActive={false}>
  {/* 你的内容 */}
</Table.Row>

3. CSS强制覆盖（兜底方案） #

若上述方法无法满足需求，可通过自定义CSS类强制覆盖样式，使用更高优先级的选择器：

/* 覆盖默认内边距 */
.TableRow {
  padding: 0 !important;
}
/* 覆盖hover状态的内边距 */
.TableRow:hover {
  padding-left: 0 !important;
}

使用方式：

<Table.Row {...flexProps} className="TableRow custom-no-padding">
  {/* 你的内容 */}
</Table.Row>

内容的提问来源于stack exchange，提问作者meWho