更改布局的背景色-Vaadin

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

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.设定高度（“120px”）；
hl.设定宽度（“100%”）；
hl.setMargin（真）；
hl.setspace（真）；
VerticalLayout contact=新建VerticalLayout（）；
标签联系人\标题=新标签（“联系人”）；
标签邮件=新标签（“，ContentMode.HTML）；
contact.addComponents（联系人名称、邮件）；
hl.addComponent（触点）；
}

其中

hl=新水平布局（）

此页脚包含在我的主页中（绝对布局）。但问题是我看不到我的主要内容和页脚之间的区别，主要是因为它的背景颜色相同。所以我想更改页脚的背景色，下面是我的尝试：

添加
hl.addStyleName（“背景色灰色”）
在代码和.backcolorgray{background color:#ACACAC}中，在我的主题.scss中，我尝试使用.v-horizontallayout-backcolorgray作为css中的类名

我还尝试了
JavaScript.getCurrent（）.execute（$（'.backcolorgy'）.css（'background-color'，'grey'））

但没什么可做的，颜色保持不变，从未改变

为了尝试javascript，我尝试了一个警报：
javascript.getCurrent（）.execute（“警报（'Hi-SO！'））但它不起作用，我想知道为什么

那么现在，我该如何更改hl的背景色呢？
听起来你的思路是对的。我注意到在你的css中，背景色没有以分号结尾。（可能是打字错误）

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

瓦丁…

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

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

@mixin mytheme{

    @include reindeer;

      .backColorGrey{
           background-color:#ACACAC;
      }

}

Scss….

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

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

@mixin mytheme{

    @include reindeer;

      .backColorGrey{
           background-color:#ACACAC;
      }

}

你在用maven/gradle/ivy吗？
您可能需要在pom.xml中添加sass编译器，请参见

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

当Vaadin应用程序处于开发模式时，当请求styles.CSS且文件不存在时，它会自动执行SCSS->CSS编译。在生产模式下，这不会发生。如果存在styles.css，则不管模式如何，都将使用该文件，并且没有SCSS->css编译

您应该使用firebug之类的工具（或者您正在使用的任何浏览器，很可能都有类似的浏览器）检查颜色是否没有被更准确的CSS规则覆盖。第一个指标是在css
中声明您的背景颜色！重要信息
。如果这没有帮助，你必须用这个工具检查那里发生了什么。如果没有一个完整的例子，就很难提供任何帮助。你在那里的css乍一看是好的（第一个。第二个指的是一个horlayout（至少在提供的代码中没有）也许不用说，但是你需要编译你的主题，以便在客户端显示.scss文件更改。此外，警报应该可以工作，你也可以使用Firefox的Firebug或IE或Chrome的开发工具找到这方面的线索，正如@cfrickMy anwer所建议的那样。我的anwer能帮到你吗？尝试一下atm，但似乎这是个好答案：）如果有帮助，请告诉我！