如何将CSS应用于VAADIN 8中的组件

Question

我正在尝试将CS​​S应用于Vaadin 8组件。我已遵循此example，但仍然无法应用CSS。我知道我可以调用addStyleName方法，并且能够以ValoTheme样式应用构建（例如ValoTheme.PANEL_BORDERLESS确实会使按钮变小），但是我的自定义样式将被忽略。我尝试在以下文件中定义我的自定义CSS规则：

/src/Main/webapp/VAADIN/themes/apptheme/styles.css

@import "../reindeer/styles.css";

.mystyle {
    color: red;
    background: #012345;
    background-color: #012345;
}

然后在Java中我创建一个按钮：

Button btn = new Button(" Test ");
  btn.addStyleName("mystyle");

我的自定义样式未应用于按钮。我怀疑我没有正确定义CSS。请分享您在Vaadin 8中如何正确执行此操作的知识。

Answer 1

这无关，但是您实际上使用的是reindeer主题吗？

否则，您应该将样式放在自己的主题文件中（从原型生成的默认样式是mytheme.scss）

建议保留styles.scss不变。此外，在文件的注释部分中也提到了该问题：

  

此文件在所有规则前面加上主题名称，以避免与其他主题发生冲突。实际样式应在mytheme.scss

中定义

如果需要，您也可以在其中添加样式

.mytheme {

  @include addons;
  @include mytheme;

  .testStyle{
    color: red;
    background: #012345;
    background-color: #012345;
  }
}

虽然可行，但我仍然建议将它们添加到您的自定义scss文件中（根据您的文件夹名称为apptheme.scss）

我的mytheme.scss看起来像这样：

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  .testStyle{
    color: red;
    background: #012345;
    background-color: #012345;
  }
}

应用样式后，按钮如下所示：

样式文件位于webapp/VAADIN/themes/mytheme

下