在 Vaadin Flow Web 应用程序中动态更改字体、字体大小、字体颜色等
Dynamically changing font, font-size, font-color, and so on in Vaadin Flow web apps
在Vaadin Flow（10及以后的版本）中，是否有一些方法可以动态改变Vaadin布局中的小部件的字体、字体大小、字体颜色等？
我确实知道 CSS, but don’t know much about SASS 的基础知识或 CSS 的其他超集，但我愿意学习。我不知道 Vaadin Flow 使用了哪些 CSS 的超集。
我知道我可以在运行时动态地 assign or remove CSS style names 到小部件。但这意味着必须已经定义了 CSS 样式。
➥有什么方法可以在运行时指定任意字体样式吗？
简短的回答是肯定的。而这也是 Vaadin Platform 10 及之后版本与 Vaadin 8 及更早版本相比的重大变化之一。在 Vaadin 平台中，主题不再基于 SASS。
此更改的原因是因为我们使用 Web 组件创建客户端 "widgets"，并且 Web 组件基于最新的 HTML5 标准。他们引入了所谓的阴影 DOM 和本地 DOM 概念。 IE。 Web 组件的内部不能在全局主题中设置样式。因此需要一些新的主题概念。 Custom properties, themable mixins, etc. We have chapter in our documentation 对此进行了详细描述。
您的特定问题可以通过 CSS 自定义属性来解决。它们基本上是 CSS 个变量，并且具有符号 --my-property。 example in documentation 如何将自定义属性添加到自定义小部件。这些自定义属性的值可以在全局样式 and/or 运行 时间通过 Flow element.getStyle().set("--my-property", "red");.
的元素 API 定义
那些自然暴露的样式也可以使用元素 API element.getStyle() 修改 运行 次，例如 element.getStyle().set("fontWeight", "bold");
所以总的来说，Vaadin Flow 为 dynamic styling 提供的功能比 Vaadin 8 多得多。
另请参阅：Vaadin Flow/10/11 style component via css
在Vaadin Flow（10及以后的版本）中，是否有一些方法可以动态改变Vaadin布局中的小部件的字体、字体大小、字体颜色等？
我确实知道 CSS, but don’t know much about SASS 的基础知识或 CSS 的其他超集，但我愿意学习。我不知道 Vaadin Flow 使用了哪些 CSS 的超集。
我知道我可以在运行时动态地 assign or remove CSS style names 到小部件。但这意味着必须已经定义了 CSS 样式。
➥有什么方法可以在运行时指定任意字体样式吗？
简短的回答是肯定的。而这也是 Vaadin Platform 10 及之后版本与 Vaadin 8 及更早版本相比的重大变化之一。在 Vaadin 平台中，主题不再基于 SASS。
此更改的原因是因为我们使用 Web 组件创建客户端 "widgets"，并且 Web 组件基于最新的 HTML5 标准。他们引入了所谓的阴影 DOM 和本地 DOM 概念。 IE。 Web 组件的内部不能在全局主题中设置样式。因此需要一些新的主题概念。 Custom properties, themable mixins, etc. We have chapter in our documentation 对此进行了详细描述。
您的特定问题可以通过 CSS 自定义属性来解决。它们基本上是 CSS 个变量，并且具有符号 --my-property。 example in documentation 如何将自定义属性添加到自定义小部件。这些自定义属性的值可以在全局样式 and/or 运行 时间通过 Flow element.getStyle().set("--my-property", "red");.
那些自然暴露的样式也可以使用元素 API element.getStyle() 修改 运行 次，例如 element.getStyle().set("fontWeight", "bold");
所以总的来说，Vaadin Flow 为 dynamic styling 提供的功能比 Vaadin 8 多得多。
另请参阅：Vaadin Flow/10/11 style component via css