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

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

---

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

从演示中我可以看出，Vaadin只生成HTML，所以是的。

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

myComponent.setStyleName("myStyleClass");

或

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

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

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

将每个面板的背景颜色更改为黄色

我建议您创建一个基于现有Vaadin主题的新主题。以下是如何：

在VAADIN/themes/目录中创建一个目录（例如VAADIN/themes/myTheme）

在主题目录中创建styles.css

添加

@import./runo/styles.css”

到styles.css的开头（您可以用任何其他现有主题替换runo）

调用

setTheme（myTheme）在您的Vaadin应用程序类中

如果要应用应用程序范围的样式，请覆盖styles.CSS中的Vaadin组件CSS定义。如果您不知道CSS类的名称，可以使用firebug检查HTML元素的类

如果要创建特定于组件的样式，请在styles.css中定义它，并调用

setStyleName

或

addStyleName

方法

---

查看《瓦丁之书》中的CSS条目。

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

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

以下是有关更多信息的链接：

你能用

@Theme（“myTheme”）

代替

设置主题（myTheme）吗？
.v-panel .v-panel-content {
    background: yellow;
}