如何使用CSS来设置表单组件的样式？

Question

Vaadin如何使用纯粹为HTML元素编写的CSS(例如样式和body,h1等元素的样式)并在Vaadin中使用那种精确的CSS样式？

是否需要对CSS进行更改以映射到相应的Vaadin元素,还是可以按原样使用该CSS？

Answer 1

您可以按原样使用CSS,但您(自然)必须通过调用告诉Vaadin要使用哪些CSS类

myComponent.setStyleName("myStyleClass");

要么

myComponent.addStyleName("myStyleClass");

两者之间的区别在于setStyleName用所提供的样式替换所有现有样式,addStyleName不替换任何内容,只是添加了为组件提供的样式.

例如,您还可以修改CSS以覆盖默认的Vaadin样式

.v-panel .v-panel-content {
    background: yellow;
}

会将每个Panel的背景颜色更改为黄色.

我建议您创建一个基于现有Vaadin主题的新主题.这是如何:

1. 在VAADIN/themes /目录中创建一个目录(例如VAADIN/themes/myTheme).
2. 在主题目录中创建styles.css.
3. 添加@import "../runo/styles.css";到styles.css的开头(您可以用任何其他现有主题替换runo).
4. 调用setTheme(myTheme);你的Vaadin应用程序类.
5. 如果要应用应用程序范围的样式,请覆盖styles.css中的Vaadin组件CSS定义.如果您不知道CSS类的名称,可以使用firebug并检查HTML元素的类.
6. 如果要创建特定于组件的样式,请在styles.css和调用setStyleName或addStyleName方法中定义它.

见Vaadin之书的CSS进入这里.