material-ui 表格：如何对表格元素进行样式更改

Question

我正在使用“material-ui”并试图让一个表元素在元素具有特定值时改变颜色。下面是我试过的代码，如果单元格值为“Out of Zone”，背景应该变红。表格呈现良好，但切换颜色变化不起作用，这是怎么回事（或者我的方法全错了）？

 function renderRowColumn(row, column) {
    if (row.status == "Out of Zone") {
        return (
            <TableRowColumn className="ae-zone">
                {row[column.name]}
            </TableRowColumn>
        )
    }
    return (
        <TableRowColumn>
            {row[column.name]}
        </TableRowColumn>
    )
}

在 style.css 中：

 .ae-zone {
    background-color: '#e57373';
    font: "white";
}

原文由 atommike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您对 css 选择器的特异性不够高。呈现的 TD 元素具有内联样式，其中继承了 background 属性，这将覆盖您的类样式。

有没有什么理由，因为你已经把逻辑分开了，你不只是为这样的事情使用内联样式。

 <TableRowColumn style={{backgroundColor:'red', color: 'white',}}>{row[column.name]}</TableRowColumn>

这绝对运作良好，我对其进行了测试。

您的另一个选择是将 !important 添加到您的 css。

 td.ae-zone {
  background-color: '#e57373' !important;
  color: "white" !important;
}

我想如果我必须选择，我会推荐第一个，因为它更干净。

原文由 mikedklein 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不要在 css 中将颜色值用引号引起来：

 .ae-zone {
    background-color: #e57373;
    color: white;
}

此外，它是 color: white ，而不是 font: white 。

原文由 gromin 发布，翻译遵循 CC BY-SA 3.0 许可协议