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

Question

Vaadin如何使用纯粹为HTML元素编写的CSS（例如，body，h1等元素的样式和布局）并在Vaadin中使用精确的CSS样式？

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

Answer 1

就我所看到的演示而言，Vaadin只是生成HTML，所以是的。

Answer 2

您可以使用CSS原样，但你（当然）必须告诉Vaadin CSS类通过调用

myComponent.setStyleName("myStyleClass"); 

或

myComponent.addStyleName("myStyleClass"); 

两者之间的差异要使用的是setStyleName用所提供的样式替换所有现有的样式，并且addStyleName不会替换任何东西，而是添加组件提供的样式。

您还可以修改你的CSS覆盖默认Vaadin风格，例如

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

将每个小组的背景颜色变为黄色。

我建议您创建一个基于现有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类的名称，则可以使用萤火虫并检查HTML元素的类。
6. 如果要创建特定于组件的样式，请在styles.css中定义它，并调用setStyleName或addStyleName方法。

查看Vaadin书中的CSS条目here。

Answer 3

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

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

下面是详细信息的链接：
https://vaadin.com/book/-/page/themes.css.html