Vaadin - Coloring table cells based on content

Question

I have a very basic example here where I'm trying to color specific cells based on a specific string value being present in that cell. I put in print statements and I'm hitting the return "green", return "orange", etc... points, but at run time I'm only getting the gray and white alternating row colors, none of my specific cell colors. The css I'm using I pulled directly from book of vaadin, thought this would be straightforward. Maybe there's something small I'm missing.

Cell style generator code:

            table.setCellStyleGenerator(new Table.CellStyleGenerator() {                
            @Override
            public String getStyle(Table source, Object itemId, Object propertyId) {
                if(propertyId != null ) {
                    Item item = source.getItem(itemId);
                    if(item.getItemProperty(propertyId).getValue().getClass() == String.class) {
                        String cellValue = (String)item.getItemProperty(propertyId).getValue();
                        if( cellValue.equals("AA") ) {
                            return "green";
                        } else if( cellValue.equals("BB") ) {
                            return "orange";
                        } else if( cellValue.equals("AB") ) {
                            return "yellow";
                        } else {
                            return "white";
                        }
                    } else {
                        return "white";
                    }
                } else {
                    return null;
                }
            }
          });

CSS:

    .v-table-cell-content-green {
    background: #33BB00;
}

.v-table-cell-content-orange {
    background: #FCB724;
}

.v-table-cell-content-yellow {
    background: #FFFF00;
}

.v-table-cell-content-white {
    background: #FFFFFF;
}

When I look at what is actually rendered in the browser, this is what a cell looks like:

<td class="v-table-cell-content v-table-cell-content-green" style="width: 59px;"><div class="v-table-cell-wrapper" style="text-align: left; width: 59px;">AA</div></td>

Answer 1

Well the above code actually works if you put the css in the correct css file. I was trying to add the styles to myproject.scss as opposed to styles.css where I guess you're supposed to.