Vaadin，应用自己的主题不起作用

Question

我正在尝试为我的Vaadin 7项目添加自定义主题。我使用了Vaadin插件主题创建者，它创建了必要的文件，我在表中添加了一个简单的背景颜色设置，但即使包含了驯鹿主题，它似乎也无法正常工作。在我的UI类中使用@Theme()注释应用我的主题后，我的表格消失了，我得到了这个（没有自定义主题看起来很好）：

我阅读了Vaadin书中描述这一部分的部分（https://vaadin.com/book/-/page/themes.creating.html），但它仍然不适用于我。 我读了这一部分：https://vaadin.com/book/-/page/themes.html#figure.themes.theme-contents它显示驯鹿应该在主题下，但它说我必须包含vaadin-themes.jar，它会正常工作。我添加了它，我的文件结构看起来像这样：

airlinedb_customtheme.scss文件的代码：

@import "../reindeer/reindeer.scss";
@mixin airlinedb_customtheme {
  @include reindeer;
  .v-table {
    background-color: red;
  }
}

和我的主题的styles.scss：

@import "airlinedb_customtheme.scss";
.airlinedb_customtheme {
   @include airlinedb_customtheme;
 }

我错过了什么？对我来说，驯鹿风格不包括在内，但我不知道为什么。

编辑：此外，我如何为我的按钮和表格行提供背景颜色？

Answer 1

尝试从vaadin jar文件中提取VAADIN / themes / reindeer目录并将其添加到WebContent内的VAADIN / themes /目录中，这样您的themes / css将以静态方式提供，并且@import应该按预期工作。< / p>

Answer 2

这只是一个建议，但尝试没有下划线的名字。我从未见过带有下划线的scss名称。

像这样：

airlinedbCustomtheme

编辑：

Vaadin book-table

请参阅CSS样式规则部分。

.v-table {}
  .v-table-header-wrap {}
    .v-table-header {}
     .v-table-header-cell {}
      .v-table-resizer {} /* Column resizer handle. */
       .v-table-caption-container {}
 .v-table-body {}
  .v-table-row-spacer {}
   .v-table-table {}
    .v-table-row {}
     .v-table-cell-content {}

要更改按钮的背景颜色，您必须先删除按钮包装和背景图像：

.v-button .v-button-wrap { 
  background-image: none !important; 
} 
.v-button { 
  background-image: none !important; 
}

不要忘记使用CSS的!important修饰符！

.v-table { 
  background-color: red !important; 
}