如何使用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. 在您的Vaadin应用程序类中调用setTheme(myTheme);。
5. 如果要应用应用程序范围的样式，请覆盖styles.css中的Vaadin组件CSS定义。如果您不知道CSS类的名称，可以使用firebug并检查HTML元素的类。
6. 如果要创建特定于组件的样式，请在styles.css中定义它并调用setStyleName或addStyleName方法。

请参阅Book of Vaadin here中的CSS条目。

Answer 2

据我所知，Vaadin只是生成HTML，所以是的。

Answer 3

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

您可以使用自己的CSS样式（就像它一样），它可以用于单个组件（如＃34; miq *＆＃34;之前所述）或整个页面。 `

以下是更多信息的链接：
https://vaadin.com/book/-/page/themes.css.html