我可以禁用 vaadin 流主题并应用普通 css

Question

Vaadin 流主题和样式让我很困惑。有没有办法禁用它并应用自然 css。我知道如何在 vaadin 中引用 css 文件，并使用 setClassName 但我更愿意对组件使用普通的 css 样式。

谢谢

Answer 1

您可以通过提供自己的样式来覆盖默认的 lumo 样式。例如，要从 ComboBox 中删除背景颜色，我可以在名为 vaadin-combo-box.css:

的 CSS 文件中按如下方式定位输入

[part="input-field"] {
    background-color: var(--lumo-base-color);
    max-width: fit-content;
}

要为禁用的按钮设置颜色，您可以按如下方式定位它：
文件名：vaadin-button.css
代码：

:host([theme~='primary'][disabled]) {
    background-color: red;
}

你得到以下内容：

要更改主要颜色或任何其他全局样式，请浏览您的 styles.css 文件。

Answer 2

与所有其他样式一样，您需要在特定状态处于活动状态时检查组件的状态/属性并检查 DOM - 唯一需要注意的是您需要在特定状态下添加这些样式vaadin-button.css 等文件应用于阴影 DOM.

Can I disable vaadin flow theeming and apply ordinary css