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