如何将 CSS 用于 Vaadin 7 组件？

Posted 2023-02-23

【中文标题】如何将 CSS 用于 Vaadin 7 组件？

【英文标题】：How can I use css for Vaadin 7 components?

【发布时间】：2014-09-18 05:31:23

【问题描述】：

我已经为我的组件设置了 styleName，但它似乎没有任何效果：

Label  label=new Label("this is test");
label.setStyleName("mytheme");

我的 CSS：

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

.test
    color: cornflowerblue;



.mytheme 
    font-family: 'Cabin Sketch';
    font-size: 24px;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 10px;
    line-height: 30px;


.v-label 
    background: cyan;

我在 intellij IDE 中的目录：web/VAADIN/themes/mytheme

我已经看过this question，但该解决方案对我不起作用。

【问题讨论】：

你如何调用/定义主题（也许我使用的是默认主题）？

解决方案：在 vaadin 7 中：Vaadin/themes/mytheme/styles.scss 在 styles.scss 中：@import url(../reindeer/legacy-styles.css);

如文档中所述：vaadin.com/book/vaadin7/-/page/themes.creating.html

我以为您使用的是 CSS（vaadin 中的普通旧 css），但您使用的是 SCSS。为什么不明白你的问题。 @cfrick 发布的链接将对您有所帮助！

另请注意，使用 addStyleName() 而不是 setStyleName() 通常会更好，因为它会保留组件中已经存在的其他样式。

【参考方案1】：

主类中的输入： @Theme("我的主题")

并由component.setStyleName("Logo");在所有项目中使用