material-ui表格：如何更改表格元素的样式 [英] material-ui table: how to make style changes to table elements

问题描述

我正在使用'material-ui'，并试图在元素具有特定值时获取表格元素以更改颜色。以下是我尝试的代码，如果单元格值为Out of Zone，背景应该变为红色。表格呈现正常，但切换颜色变化不起作用，怎么会（或者我的方法都是错误的）？

I'm using 'material-ui' and trying to get a table element to change color when the element has a certain value. Below is the code I tried, if the cell value is "Out of Zone", the background should go red'ish. The table renders fine, but toggling the color change doesn't work, how come (or is my approach all wrong)?

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>
    )
}

In style.css:

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

推荐答案

不够高。呈现的TD元素具有内联样式，其中背景属性正在被继承，这正在覆盖您的类样式。

Your specificity on the css selector is not high enough. The rendered TD element has an inline style in which the background property is getting inherited which is overriding your class style.

是否有任何理由，因为您已经分离了逻辑

Is there any reason since you already have the logic seperated out you don't just use inline styles for something like this.

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

这绝对有效，我测试过。

This is definitely working well and I tested it.

您的其他选项是为您的css添加！important。

Your other option would be to add !important to your css.

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

我想如果我必须选择，但我会推荐第一个，因为它是清洁剂。

I think if I had to chose though I would recommend the first as it is cleaner.

这篇关于material-ui表格：如何更改表格元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！