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

我正在使用“material-ui”并尝试让表格元素在元素具有特定值时改变颜色。下面是我尝试过的代码，如果单元格值为“超出区域”，背景应该变成红色。表格渲染得很好，但是切换颜色变化不起作用，这是怎么回事（或者我的方法全错了）？

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";
}

您对 css 选择器的特异性不够高。渲染的 TD 元素具有内联样式，其中继承背景属性，这会覆盖您的类样式。

既然您已经将逻辑分开，是否有任何原因您不只是使用内联样式来实现这样的事情。

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

这绝对运作良好，并且我测试了它。

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

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

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