vaadin - 更改布局的背景颜色 - Vaadin

Question

在我的一个应用程序中，我创建了一个页脚:

public Footer(){
        hl.setHeight("120px");
        hl.setWidth("100%");
        hl.setMargin(true);
        hl.setSpacing(true);

    VerticalLayout contact = new VerticalLayout();
    Label contact_title = new Label("Contact");
    Label mail = new Label("<a href='mailto:contact@flavien-normand.fr'>Par email</a>",ContentMode.HTML);

    contact.addComponents(contact_title,mail);


    hl.addComponent(contact);               
}

其中hl = new Horizo​​ntalLayout();

此页脚包含在我的主页(absoluteLayout)中。但问题是我没有看到我的主要内容和页脚之间的区别，主要是因为它的背景颜色相同。所以我想更改页脚的背景颜色，这是我尝试的方法:

在代码中添加 hl.addStyleName("backColorGrey"); 在我的主题 .scss 中添加 .backColorGrey{background-color:#ACACAC} ，我尝试了与 .v-horizo​​ntallayout- 相同的操作backColorGrey 作为 css 中的类名。

我还尝试过 JavaScript.getCurrent().execute("$('.backColorGrey').css('background-color', 'grey')");

但什么也不做，颜色保持不变，从未改变。

为了尝试 javascript，我尝试执行警报: JavaScript.getCurrent().execute("alert('Hi SO!')"); 但它不起作用，我想知道为什么。

现在，我该如何更改 hl 的背景颜色？

Answer 1

听起来您走在正确的道路上。我注意到在你的CSS中你没有用分号结束背景颜色。 (可能只是一个打字错误)。

可能是您的主题未正确编译。检查您的主题中是否包含 mixin 定义。

瓦丁...

Footer footer = new Footer();
footer.addStyleName("backColorGrey");

Scss...

@import "../reindeer/reindeer.scss";

@mixin mytheme{

    @include reindeer;

      .backColorGrey{
           background-color:#ACACAC;
      }

}

你使用maven/gradle/ivy吗？您可能需要在 pom.xml 中添加 sass 编译器，请参阅 VAADIN cannot find themes when in productionMode

还要检查您是否未处于生产模式...

When a Vaadin application is in development mode, it does the SCSS -> CSS compilation automatically when styles.css is requested and the file does not exist. In the production mode this does not happen. If styles.css exists, regardless of mode, the file is used and there is no SCSS -> CSS compilation