html - Material -ui表: how to make style changes to table elements

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

Answer 1

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

既然您已经将逻辑分离出来，那么您是否有任何理由不只是对这样的事情使用内联样式。

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

这绝对运行良好，我已经测试过了。

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

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

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