Question

我正在使用＆＃39; material-ui＆＃39;并尝试在元素具有特定值时获取表元素以更改颜色。下面是我尝试的代码，如果单元格值是＆＃34;超出区域＆＃34;，背景应该变为红色＆＃39; 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元素具有内联样式，其中后台属性将被继承，这将覆盖您的类样式。

有没有任何理由因为你已经把逻辑分开了，所以你不要只使用内联样式。

.war

这肯定运作良好，我测试了它。

您的另一个选择是添加！对您的CSS很重要。

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

我想如果我必须选择虽然我会推荐第一个，因为它更清洁。

Answer 2

不要在css中为颜色值添加引号：

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

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

Answer 3

大多数情况下，Table采用默认样式，因此如果样式dint得到应用，请尝试在样式中附加！important。这对我有用。

＆＃13;

.ae-zone {
    background-color: '#e57373' !important;
    color:red;
}

＆＃13;

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

3 个答案: