I am working with 'material-ui' and attempting to change the color of a table element based on its value. In the code snippet below, I have tried to make the background color go red if the cell value is "Out of Zone". However, even though the table renders correctly, the color change does not toggle as expected. Can someone help me understand why it's not working or if my approach is incorrect?
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";
}