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

Question

我目前有一个 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>

提前谢谢你

Answer 1

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

<TableBody stripedRows > </TableBody>

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

Answer 2

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

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

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

@版本 4.2.1

Answer 3

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

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

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

Answer 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 示例中看到它的工作原理。