问题标签 [vaadin-themes]

我很难将 Vaadin 电子表格的 css（更具体地说是 scss）包含在我的项目主题中。

我是否像这样将它添加到styles.scss？

或者是这样的？

前者编译但输出 .css 似乎没有任何必需的规则。第二个打破这个消息......

有任何想法吗？也许我需要从 Vaadin-Spreadsheet 的 .jar maven 导入中获取 .scss 并将其副本放在我的目录中并执行 @import 吗？

我在 Vaadin 的 valo 主题之上定义了我自己的自定义主题。

这是文件 mycustomtheme.scss 的内容：

要设置背景图像的组件的 java 代码是：

1.) 为什么将背景颜色设置为蓝色有效，但将字体颜色设置为白色无效？我对照 Vaadin 团队的示例检查了我的代码，我看不出我可能做错了什么：

2.) 为什么不显示背景图像？

我目前正在将 Vaadin 8 应用程序迁移到 Vaadin 12。外观应该由用户使用，并在登录时或通过按下按钮进行更改。

在我们的 Vaadin 8 应用程序中，我们有 2 个主题（一个深色和一个浅色），每个主题都有自己的 SASS/CSS 和一些共享属性。用户可以使用 setTheme() 方法进行切换。当点击切换按钮时，外观就发生了变化。在 Vaadin 12 中，Theming 采用了不同的方法，我正在努力寻找一种在 Vaadin 12 中实现此功能的好方法。

假设我们不想创建一个全新的主题，只想使用自定义的 LUMO。我可以通过@Theme Annotation 设置主题/变体。缺点：主题将在运行时固定。

我也可以编写一些代码来将变体应用于我的应用程序和组件。（如动态样式章节：https : //vaadin.com/docs/flow/element-api/tutorial-dynamic-styling.html ）缺点：遍历每个元素并应用变体。

我现在的问题：

在运行时实现主题之间切换的最佳方法是什么？（定制的 Lumo 或任何其他主题的明暗变体）。

我是否只需创建 2 个包含 CSS 的 HTML 文件（为了兼容性），然后通过动态导入以某种方式覆盖当前使用的文件？

我希望我的问题很清楚，有人可以指出我正确的方向。

Vaadin 14(.1.19) 附带了这个时间选择器组件：https ://vaadin.com/components/vaadin-time-picker/java-examples

这是它的样子（当它是只读的时候）：

我怎样才能让这个时间选择器显示像这样居中的时间（这是浏览器中手动操作的屏幕截图（直接在嵌入式输入字段中设置 text-align:center），而不是编程解决方案）？

我试图在 Java 代码中设置 text-align 属性但没有效果：

我搜索了一个主题变体。但这似乎只存在于 TextFields 和派生字段：

最近，我将应用程序和组件的 CSS 样式切换为主题（在 vaadin 14.6 中添加）。现在我正在寻找一种替代方法来包含@CssImport 注释的参数。

我们对 vaadin-chart 进行了一些样式更改，但我们需要包含原始vaadin-chart-default-theme。

有没有办法通过主题支持实现相同的目标？

谢谢

我在我的项目中使用我自己的主题。如果我下载一个新项目，并在“前端”目录中创建自己的主题，它就完美了。

当我更改为我的应用程序时，每次打开它都会显示...

TypeError：无法访问属性“appendChild”，n.shadowRoot 为空

在我有@Theme(Lumo.class)的课程中​​，我将其更改为我自己的主题@Theme(themeFolder = "eo-vaadin-orange")。

我在 package.json 中添加了 lumo-css-framework ...

我在前端目录中创建了主题...

并创建我自己的styles.css ...

我跑起来了，但每次我得到这个¿javascript？错误。

有任何想法吗？

谢谢

==== 更新 ======

在 webpack 捆绑主题中的所有 javascript 类之后，我只使用 shadowRoot ...

这是我的 package.json 文件...

我基本上是在尝试为所有布局添加一个红色边框，以试图找出哪个布局没有按照我的预期设置。我看到有可能如本视频的开头所示：https ://www.youtube.com/watch?v=Efv_cPHEqdQ但是当我尝试时它不起作用。我也一直在参考这个视频，它似乎有点不同：https ://www.youtube.com/watch?v=Swki9XXs9SA我也一直在查看这个文档，但不清楚它没有当我将布局视为组件时，它似乎不起作用：https ://vaadin.com/docs/latest/ds/customization/styling-components

我基本上想避免在代码中的每个布局中添加一个类，并让它在全球范围内进行。这样我可以很容易地打开和关闭它来调试布局问题。

是否有可能在答案中包含一个示例。我试图创建一个组件 css 文件以及一个布局/视图 css 文件，但似乎都不起作用。css 很简单，border: 1px solid red;唯一的问题是它在哪里。我也确实在frontend/themes/customTheme.

更新按照评论中的要求，我正在添加我尝试过的内容。至少我能记住的。我忘记了我尝试过的所有内容，所以这只是我尝试过的一个示例。

添加frontend/themes/myCustomTheme/components/vaadin-horizontal-layout.css了哪些包含（基于文档和我为文本字段所做的）：

添加frontend/themes/myCustomTheme/layouts/views/layouts-view.css内容（基于 YouTube 视频https://www.youtube.com/watch?v=Efv_cPHEqdQ）：

然后我尝试了上面的一些排列以及一堆我不再记得的其他事情。不同的文件位置、命名约定等。链接和视频似乎也表明了不同的做事方式。我无法在网上找到有关如何为布局执行此操作的说明或示例，因为它们看起来和/或可能与组件不同。例如，我能够使用它使其适用于其他组件

frontend/themes/myCustomTheme/vaadin-text-field.css内容：