ReactJS + Material-UI：如何在 Material-UI <Table/> 的 <TableRow/> 之间交替颜色？

Posted 2023-02-22

【中文标题】ReactJS + Material-UI：如何在 Material-UI <Table/> 的 <TableRow/> 之间交替颜色？

【英文标题】：ReactJS + Material-UI: How to alternate colors between Material-UI <Table/>'s <TableRow/>?

【发布时间】：2017-02-07 11:08:03

【问题描述】：

我目前有一个 Material-UI 的 <Table/> ( http://www.material-ui.com/#/components/table )，并且希望每一行在蓝色和紫色之间切换。所以第一个是蓝色的，然后下一行是紫色的，依此类推，添加任何额外的行。

如何为添加的任何其他行动态关闭两种颜色？

render()

    return(
        <Table
          multiSelectable=true
        >
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>First Name</TableHeaderColumn>
              <TableHeaderColumn>Last Name</TableHeaderColumn>
              <TableHeaderColumn>Color</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
            displayRowCheckbox=true
            stripedRows
          >
              <TableRow>
                <TableRowColumn>John</TableRowColumn>
                <TableRowColumn>Smith</TableRowColumn>
                <TableRowColumn>Red</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Paul</TableRowColumn>
                <TableRowColumn>Row</TableRowColumn>
                <TableRowColumn>Black</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Doe</TableRowColumn>
                <TableRowColumn>Boe</TableRowColumn>
                <TableRowColumn>Pink</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Frank</TableRowColumn>
                <TableRowColumn>Done</TableRowColumn>
                <TableRowColumn>White</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Lucy</TableRowColumn>
                <TableRowColumn>Ju</TableRowColumn>
                <TableRowColumn>Orange</TableRowColumn>
              </TableRow>
          </TableBody>
        </Table>

提前谢谢你

【问题讨论】：

github.com/callemall/material-ui#customization

【参考方案1】：

您可以使用 <TableBody> 组件的 stripedRows 属性来对行进行视觉分隔，但我不确定您是否可以为此选项自定义颜色。

<TableBody stripedRows > </TableBody>

或者您可以通过为<TableBody> 组件设置className 来实现它，并使用css even and odd rules 设置颜色。或许，您还应该为这些规则设置 !important 以覆盖内联样式。

【讨论】：

在我接受答案并点赞之前，您知道是否可以使用stripedRows 更改颜色吗？因为这是最好的方法，并尝试搜索它，但定制没有运气......

我没有找到办法做到这一点。您可以尝试自定义主题，但我认为并非如此，因为颜色会随处更改。我还在 github 上打开了一个问题，与维护人员讨论这种情况。您无法追踪它，因为我可能是错的并且有解决方案。 github.com/callemall/material-ui/issues/5286

非常感谢！会留意的。最后一个问题，在选中一个复选框后，有没有办法摆脱行突出显示？

不确定我是否理解正确。你的意思是取消所有行的条带属性还是只取消一个？

在 2016 年到 2019 年之间的某个时候，这种情况发生了变化，“stripedRows”不再可用。相反，您可以执行类似的操作：rows.map((row, index) => ( <TableRow key=row.percent className=index%2 ? classes.lightRow : classes.darkRow> ))

【参考方案2】：

我有点晚了，但由于某种原因stripedRows 对我不起作用，这就是我这样做的原因：

只需使用模运算符在 2 种颜色之间切换

this.state.data.map((row)=> (
 <TableRow style = row.rank % 2?  background : "#fdffe0" : background : "white" > 
...
</TableRow>
))

@版本 4.2.1

【参考方案3】：

试试这个。这在@version 4.4.2 中运行良好

this.state.data.map((row,index)=> (
 <TableRow style = index % 2?  background : "#fdffe0" : background : "white" > 
...
</TableRow>
))

希望这会对您有所帮助。快乐编码...！

【参考方案4】：

您可以使用withStyles 创建样式TableRow 并应用even and odd css rules。

---

使用 Typescript：

const StyledTableRow = withStyles((theme: Theme) =>
  createStyles(
    root: 
      '&:nth-of-type(odd)': 
        backgroundColor: "white",
      ,
      '&:nth-of-type(even)': 
        backgroundColor: "grey",
      ,
    ,
  ),
)(TableRow);

使用 Javascript：

const StyledTableRow = withStyles((theme) => (
  root: 
    '&:nth-of-type(odd)': 
      backgroundColor: "white",
    ,
    '&:nth-of-type(even)': 
      backgroundColor: "grey",
    ,
  ,
))(TableRow);

---

使用你的例子，它应该是这样的：

render()
  return(
    <Table multiSelectable=true >
      <TableHeader>
        <TableRow>
          ...
        </TableRow>
      </TableHeader>
      <!-- stripedRows is no longer available in the newer versions of MUI -->
      <TableBody displayRowCheckbox=true >
        <StyledTableRow>
          ...
        </StyledTableRow>
...

这就是 Material-UI 在其docs 中的奇/偶行样式。

您可以在这个 CodeSandbox 示例中看到它的工作原理。

【讨论】：

这是正确的答案。给这个人一万美元