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

Question

我正在尝试将 CSS 应用于 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 保持原样。此外，它在文件的评论部分中提到：

This file prefixes all rules with the theme name to avoid causing conflicts with other themes. The actual styles should be defined in 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

下

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

How can i apply CSS to components in VAADIN 8

css

sass

vaadin8