Html material-ui table：如何对表格元素进行样式更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35053163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
material-ui table: how to make style changes to table elements
提问by atommike
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)?
我正在使用 'material-ui' 并尝试让表格元素在元素具有特定值时更改颜色。下面是我试过的代码，如果单元格值为“Out of Zone”，背景应该变红。表格渲染得很好，但切换颜色变化不起作用，怎么会（或者我的方法全错了）？
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:
在 style.css 中：
.ae-zone {
background-color: '#e57373';
font: "white";
}
回答by mikedklein
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.
您对 css 选择器的特异性不够高。呈现的 TD 元素具有内联样式，其中背景属性正在被继承，该样式覆盖您的类样式。
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.
这绝对运行良好，我对其进行了测试。
Your other option would be to add !important to your css.
您的另一个选择是将 !important 添加到您的 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.
我想如果我必须选择的话，我会推荐第一个，因为它更干净。
回答by gromin
Don't put quotes around color values in css:
不要在 css 中的颜色值周围加上引号：
.ae-zone {
background-color: #e57373;
color: white;
}
Also, it's color: white, not font: white.
此外，它是color: white，不是font: white。
回答by sunaina kotekar
Most of the time Table takes default style so if the styles dint get apply try appending !important to the style. This worked for me.
大多数时候 Table 采用默认样式，因此如果样式 dint 被应用，请尝试将 !important 附加到样式。这对我有用。
.ae-zone {
background-color: '#e57373' !important;
color:red;
}