通过 css 的 Vaadin Flow/10/11 样式组件

我的问题很基本。

如何将 css 文件中的样式添加到基本 vaadin 组件中？

我做什么NOT想要使用：

• 聚合物模板
• getStyle().set(...)

我是否必须 @ImportHtml（其中包含 css 代码）还是必须 @StyleSheet 与 css 文件？之后，我是否必须通过 .getElement().getClassList().add(...) 添加“css-style”？

我真的需要帮助才能拥有工作简单的代码示例 for a 标签、按钮或其他任何东西，请。我找不到任何东西可以满足我的要求。

In our 文档 http://%20https://vaadin.com/docs/v11/flow/theme/application-theming-basics.html我们指导在 MainView 中使用 @ImportHtml 作为 html 样式模块来实现全局样式。

在全局样式模块中，您可以应用主题混合 https://github.com/vaadin/vaadin-themable-mixin/wiki更改组件的可样式阴影部分等。

如果您的目标不在 Shadow DOM 中，您可以直接在自定义样式块中设置样式，例如

假设您的应用程序中有一个 Label 和 TextField

   // If styles.html is in src/main/java/webapp/frontend/ path is not needed
   @HtmlImport("styles.html")
   public class MainLayout extends VerticalLayout implements RouterLayout { 
      ...
      Label label = new Label("Title");
      label.addClassName("title-label");
      add(label);
      ...
      TextField limit = new TextField("Limit");
      limit.addClassName("limit-field");
      add(limit);
      ...
   }

并在 src/main/java/webapp/frontend/styles.html 中

   <custom-style>
      <style>
         .title-label {
            color: brown;
            font-weight: bold;
          }
          ...
      </style>
   </custom-style>

   <dom-module theme-for="vaadin-text-field" id="limit-field">
      <template>
         <style>
            :host(.limit-field) [part="value"]{
               color:red
            }
         </style>
      </template>
   </dom-module>

您的“标题”文本将具有棕色粗体字体，文本字段中的值将为红色，但其标题不受影响。

也可以看看：在 Vaadin Flow Web 应用程序中动态更改字体、字体大小、字体颜色等 https://stackoverflow.com/questions/53126339/dynamically-changing-font-font-size-font-color-and-so-on-in-vaadin-flow-web-a/53129202#53129202