Vaadin，应用自己的主题无效

Question

I am trying to add custom theme to my Vaadin 7 project. I used the Vaadin plug-in theme creater, it created the necessary files and I included a simple background-color setting to my table, but even though reindeer theme is included it doesn't seem to work. After I apply my theme with @Theme() annotation on my UI class my table disappears and I get this (without the custom theme it looks fine):

I read the part of the Book of Vaadin that describes this ( https://vaadin.com/book/-/page/themes.creating.html ) but it still doesn't work for me. I read this part: https://vaadin.com/book/-/page/themes.html#figure.themes.theme-contents and it shows reindeer should be under themes, but it says I have to include the vaadin-themes.jar and it will work fine. I did add it, my filestructure looks like this:

airlinedb_customtheme.scss file's code:

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

and my theme's styles.scss:

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

What am I missing? It looks like to me that reindeer style isn't included but I have no idea why.

EDIT:Furthermore, how can I give background color for my button and my table-row?

Answer 1

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

Answer 2

That's just a suggestion but try the names without underlines.I have never seen before scss names with underlines.

Like this:

airlinedbCustomtheme

EDIT:

Vaadin book-table

Read this at section CSS style rules.

.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 {}

To change the background color of a button then you have to remove the button wrapper and background image first:

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

Don't forget to use the !important modifier for the CSS!

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