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

这只是一个建议，但请尝试不带下划线的名称。我以前从未见过带下划线的 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; 
} 

Answer 2

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