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

Question

我正在使用 'material-ui' 并尝试让 table 元素在元素具有特定值时更改颜色。下面是我试过的代码，如果单元格值为 "Out of Zone"，背景应该变红。 table 渲染正常，但是切换颜色变化不起作用，怎么会（或者我的方法全错了）？

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 元素有一个内联样式，其中背景属性被继承，它覆盖了你的 class 样式。

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

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

这绝对工作得很好，我测试了它。

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

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

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

Answer 2

不要在 css:

中的颜色值周围加上引号

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

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

Answer 3

大多数时候 Table 采用默认样式，因此如果未应用样式，请尝试将 !important 附加到样式。这对我有用。

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

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

material-ui table: how to make style changes to table elements

html

css

material-ui