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

Posted 2023-02-23

【中文标题】我如何将 CSS 应用于 VAADIN 8 中的组件

【英文标题】：How can i apply CSS to components in VAADIN 8

【发布时间】：2020-03-30 15:02:58

【问题描述】：

我正在尝试将 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 中如何正确执行此操作的知识。

【问题讨论】：

apptheme.scss... 在打包应用程序之前，您会将此 scss 文件编译为 css 吗？我不相信vaadin 理解scss。在您的链接示例中，他们不使用 scss

我尝试过同时使用：scss 和纯 css。我会更新我的问题。

【参考方案1】：

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

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

建议保持styles.scss 不变。此外，文件的 cmets 部分也提到了它：

该文件以主题名称作为所有规则的前缀，以避免与其他主题发生冲突。实际的样式应该在 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