如何使用 CSS 更改 vaadin 的默认组件的样式？答案

【问题标题】：How to change the style of the default components of vaadin with CSS?如何使用 CSS 更改 vaadin 的默认组件的样式？
【发布时间】：2022-01-20 14:34:31
【问题描述】：

我正在尝试替换 vaadin 流组件的默认外观，例如文本字段、密码字段和组合框。在为文本字段使用波纹管 css 后想到，我发现它们没有被完全替换。能告诉我怎么修改吗？

我的 CSS

input[type=text], select 
{
  width: 100%; 
  border: 1px solid #ccd;
  background-color: white;
  border-radius: 4px;
}

input[type=text]:hover {
  background-color: yellow;
}

【问题讨论】：

尽管我对 vaadin 流程一无所知，但我会假设生成的 html 会有一些你可以使用 !important 标签覆盖的 css。所以首先尝试一下。然后检查您是否可以以某种方式看到生成的 html，以便更好地了解问题。我知道我的回答不多，但我希望我能帮上一点忙。

标签： css vaadin vaadin-flow

【解决方案1】：

我假设您正在使用内置的 Vaadin 组件，例如 TextField、PasswordField 和 ComboBox。这些实际上就是所谓的“Web 组件”，它们将多个元素组合在一起，以在原生 HTML 元素上添加更丰富的功能。 Vaadin 组件在内部使用 shadow DOM，这需要稍微复杂的 CSS 思考方式，以及全局和作用域样式。

我建议您阅读以下文档：

【讨论】：