根据值设置材质 ui 表格单元格答案

【问题标题】：Styling material ui table cells according to their values根据值设置材质 ui 表格单元格
【发布时间】：2020-01-20 19:19:28
【问题描述】：

我有一个材质 ui 表，我想根据它们中显示的值为不同的单元格着色。这些单元格使用 map 填充 json 数据。例如，如果一个单元格的值为 1，我希望颜色为黄色。

    {
      Name: "A Person",
      Attendence: [
        {
          date: "2019/12/01",
          attendence: 1
        },
        {
          date: "2019/12/02",
          attendence: 1
        },
        {
          date: "2019/12/03",
          attendence: 0
        }
      ]
    }
  ];

  return (
    <Fragment>
      {attendence.map(person => {
        return (
          <Table>
            <thead>
              <tr>
                <th>Name</th>
                {person.Attendence.map(personAttendendance => {
                  return <th>{personAttendendance.date}</th>;
                })}
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{person.Name}</td>
                {person.Attendence.map(personAttendendance => {
                  return <td>{personAttendendance.attendence}</td>;
                })}
              </tr>
            </tbody>
          </Table>
        );
      })}
    </Fragment>
  );
}

export default Test;

这就是桌子的样子。我试过了

    if(value === 1){
      return(
        <TableCell style={{ background: "red" }}>{value}</TableCell>
      )

    } else {
      return(
        <TableCell style={{ background: "red" }}>{value}</TableCell>
      )
    }

  }

但这没有用。它只是读取了 else 并将所有内容变为红色。

【问题讨论】：

链接到编译此表的代码框codesandbox.io/s/sad-grass-sg5hr
你的两个条件都有背景：红色
@AvcS 出现错误。尽管有这个错误，但它不起作用
我刚刚尝试了这个 if 条件，它按预期工作codesandbox.io/s/boring-moon-ilsci
@AvcS 它有效。我的问题是我没有给任何东西赋值。非常感谢。

标签： css reactjs material-ui

【解决方案1】：

将 test.js 中的 tbody 更改为：

<tbody>
   <tr>
      <td>{person.Name}</td>
      {person.Attendence.map(personAttendendance => {
          if(personAttendendance.attendence === 1){
             return <td style={{background: "red" }}>{personAttendendance.attendence}</td>;
          } else {
             return <td style={{background: "blue" }}>{personAttendendance.attendence}</td>;
          }                  
      })}
   </tr>
</tbody>

或

<tbody>
   <tr>
      <td>{person.Name}</td>
      {person.Attendence.map(personAttendendance => {
          return <td style={{background: personAttendendance.attendence === 1 ? "red" : "blue"}}>{personAttendendance.attendence}</td>;                
      })}
   </tr>
</tbody>

哪个最适合你。

链接到 fork here。（使用第二个例子）

【讨论】：