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

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.

Don't put quotes around color values in css:

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

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