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

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

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

您可以按原样使用 CSS，但您（自然）必须通过调用来告诉 Vaadin 要使用哪些 CSS 类

myComponent.setStyleName("myStyleClass");

or

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. Add @import "../runo/styles.css";到 styles.css 的开头（您可以用任何其他现有主题替换 runo）。
4. Call setTheme(myTheme);在您的 Vaadin 应用程序类中。
5. 如果您想应用应用程序范围的样式，请覆盖您的 styles.css 中的 Vaadin 组件 CSS 定义。如果您不知道 CSS 类的名称，可以使用 firebug 并检查 HTML 元素的类。
6. 如果要创建特定于组件的样式，请在 styles.css 中定义它并调用setStyleName or addStyleName方法。

请参阅 Vaadin 书中的 CSS 条目here https://vaadin.com/book/-/page/themes.css.html.