如何在Semantic UI React的Table.Row中实现文本居中对齐

你原有方案不生效的核心原因有两点：

1. Semantic UI React 的 Table.Row 对应HTML的<tr>元素，你给行设置的text-align: center属于继承属性，而框架默认给Table.Cell（对应<td>）设置了左对齐的内置样式，继承样式的优先级低于框架内置的元素样式，因此不会生效。
2. 你原有JSX写法不符合组件规范，Table.Row 内不允许直接放置文本内容，必须嵌套 Table.Cell 组件承载内容，否则渲染出的DOM结构不符合表格规范，也会导致样式失效。

方案1：使用框架内置属性（最推荐，无需自定义CSS） #

Semantic UI 内置了文本对齐的配置项，直接给单元格加textAlign属性即可，空状态提示一般需要跨列展示，同步配置colSpan属性匹配你的表格列数：

<Table>
  {/* 其他表格头部、内容代码 */}
  <Table.Body>
    <Table.Row>
      {/* 把colSpan的数值替换为你实际的表格列数 */}
      <Table.Cell colSpan={4} textAlign="center">
        No Records Found
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

方案2：调整自定义CSS优先级 #

如果需要保留自定义类名的方案，修改CSS选择器提高优先级，命中行内的单元格元素即可生效：
自定义CSS代码：

/* 选择器精准命中表格行下的单元格，优先级高于框架默认样式 */
.ui.table tr.center td {
  text-align: center;
}

JSX代码：

<Table.Row className='center'>
  <Table.Cell colSpan={4}>No Records Found</Table.Cell>
</Table.Row>

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