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

问题

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

回答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.

回答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.

回答3:

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.

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

来源：https://stackoverflow.com/questions/35053163/material-ui-table-how-to-make-style-changes-to-table-elements

标签

html

css

material-ui