瓦丁 - 根据内容为表格单元格着色

Question

这里有一个非常基本的例子，我试图根据单元格中存在的特定字符串值来给特定的单元格着色。我输入打印报表，然后点击返回“绿色”，返回“橙色”，等等...点，但在运行时，我只得到灰色和白色交替的行颜色，没有我特定的单元格颜色。我使用的css是直接从《瓦丁之书》中提取的，我认为这很简单。也许我遗漏了一些小事。

单元格样式生成器代码：

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

当我查看浏览器中实际呈现的内容时，这是单元格的样子：

<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

如果你把css放在正确的css文件中，上面的代码实际上是有效的。我试图将样式添加到我的项目中。scss与样式相反。我想你应该在这里。