如何使用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