我可以禁用vaadin flow theeming并应用普通css吗答案

【问题标题】：Can I disable vaadin flow theeming and apply ordinary css我可以禁用vaadin flow theeming并应用普通css吗
【发布时间】：2023-04-04 01:35:01
【问题描述】：

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

谢谢

【问题讨论】：

当您创建 index.css 页面并将其链接到您的主文件时，我认为您可以通过在此处提供 !important 来使用它。
我认为如果你指定你是用java还是typescript编写ui会更健康。
我正在使用java编写ui
更好的问题；什么让你困惑？
例如，它让我感到困惑的是，我需要普通样式的文本框、组合框和日期选择器。此外，我不知道如何为动态禁用的按钮设置颜色。一般来说，人们可以在网络上找到很多关于 CSS 的信息，而不是专门针对 vaadin flow。

【解决方案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 文件。

【讨论】：

【解决方案2】：

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

【讨论】：