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

【问题标题】：material-ui table: how to make style changes to table elementsmaterial-ui 表格：如何对表格元素进行样式更改
【发布时间】：2016-05-05 08:05:39
【问题描述】：

我正在使用“material-ui”并尝试让表格元素在元素具有特定值时更改颜色。下面是我尝试过的代码，如果单元格值是“超出区域”，则背景应该是红色的。表格渲染得很好，但是切换颜色变化不起作用，怎么会（或者我的方法全错了）？

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

【问题讨论】：

标签： html css material-ui

【解决方案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;
}

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

【讨论】：

内联样式部分起作用，它只是将整行的背景涂成红色（不仅仅是单元格）并且不会改变字体颜色。课堂方法对我来说根本不起作用。
@atommike 首先，我的道歉有一个错字。需要使用颜色 css 属性而不是字体。对于行着色问题，您能否详细说明如何迭代表格行中的表格单元格？也许将您的整个渲染功能放在上面将有助于更好地了解可能发生的事情。因为我能够使用内联样式并应用于单个单元格。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

大多数情况下，表格采用默认样式，因此如果未应用样式，请尝试将 !important 附加到样式中。这对我有用。

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

【讨论】：