material-ui table:如何对表元素进行样式更改

Question

我正在使用'material-ui'并尝试获取一个表元素,以便在元素具有特定值时更改颜色.下面是我尝试过的代码,如果单元格值是"Out of Zone",背景应该是red'ish.表格渲染得很好,但切换颜色变化不起作用,怎么样(或者我的方法都错了)？

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>

这肯定运作良好,我测试了它.

你的另一个选择就是给你的css添加!important.

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

我想如果我不得不选择虽然我会推荐第一个,因为它更干净.