css - 通过覆盖应用在其上的默认 css 自定义 Vaadin 详细信息展开图标

Question

我想要展开/取消展开功能，我使用 Vaadin 详细信息。

Div contentDiv = new Div();

Label label = new Label("Expand");

Details details = new Details(label, contentDiv);

它给出的是以下输出:

但是，我想要的是右侧的展开图标。因此，我使用 ThemeVariants 如下所示:

details.addThemeVariants(DetailsVariant.REVERSE);

它给出的是以下输出:

文字和图标之间存在巨大差距。

这是因为应用了以下默认 CSS。

:host([theme~="reverse"]) [part="summary"] {
    justify-content: space-between;
}

所以，现在我需要重写这个 css。我所做的就是在我的 css 文件中添加下面的 css 代码，并在 import 中添加 themeFor="summary" 。但没有成功。

:host([theme~="reverse"]) [part="summary"] {
            justify-content: normal;
        }

预期输出:

那么，在 Vaadin 中还有其他方法可以做到这一点吗？或者如何覆盖 ThemeVariants 的默认 css。

注意:我使用的是 Vaadin 14。

Answer 1

当 css 不起作用时，问题之一是导入错误。

检查您的 css 导入是否使用 themeFor 指定。

CSS 导入示例:

@CssImport(value = "./styles/vaadin-details.css", themeFor = "vaadin-details")

在 vaadin-details.css 中:

:host([theme~="reverse"]) [part="summary"] {
    justify-content: normal;
} 

Link to Vaadin documentation about css styling .

这是commit我在那里得到了你预期的结果。请看我如何导入 css 文件。

此外，正如您正确指出的那样，使用 Div 时会重现此缺陷，而不是使用垂直布局。