为网格指定多个反向条件

Question

在普通的语义 UI 中，我们可以这样做：

<div class="ui mobile reversed tablet reversed equal width grid container">

这将在移动设备和平板电脑分辨率上以相反的顺序显示列。 Example

我正在尝试使用 Semantic UI React 实现相同的行为，但我没有这样做。

这是我尝试过的：

<Grid reversed="computer tablet">
// or
<Grid reversed="computer,tablet">
// or
<Grid reversed="computer|tablet">
// or
<Grid reversed={["computer","tablet"]}>

都会导致类似的错误信息：

警告：失败的道具类型：无效道具reversed 提供给computer,tablet 的价值GridRow，应为 ["computer","computer vertical","mobile","mobile vertical","tablet" 之一,"平板垂直"].

有没有办法实现这一点，或者这是 Semantic UI React 中缺少的功能？

---

目前，我正在使用以下解决方法，非常难看：

const content = [<Grid.Row key="row1">...</Grid.Row>, <Grid.Row key="rowN">...</Grid.Row>]
<Grid reversed="computer" only="computer">
  {content}
</Grid>
<Grid reversed="tablet" only="tablet">
  {content}
</Grid>
<Grid only="mobile">
  {content}
</Grid>

Answer 1

您可以使用网格的className 属性：

<Grid className='table reversed computer reversed' />

可以在doc 中看到该道具。