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

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

<TableBody stripedRows > </TableBody>

或者您可以通过为className组件设置<TableBody>并使用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

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

使用打字稿：

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 示例中看到这一点。

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

4 个答案: