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

Question

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

Answer 1

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.

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.

Answer 2

Don't put quotes around color values in css:

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

Also, it's color: white, not font: white.