标签 CSS 中的 Vaadin 14 样式按钮

Question

是否有机会在 vaadin-tabs 组件的 css 选项卡内设置我的按钮样式，或者我必须通过 setclassname 单独为按钮设置样式？

根据本教程https://vaadin.com/docs/v14/flow/styling/styling-components 我试过了：

vaadin-tabs vaadin-button{
   background-color:red;
}

vaadin-tab > vaadin-button{
   background-color:red;
}

[part="close-tab-btn"]{
  background-color:red;
}

但这些都不起作用。我正在通过注释导入我的 css：

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

我的 css 的其余部分如下所示：

[part="tabs"] ::slotted(vaadin-tab[selected]) {
    color: var(--default-white-color);
    background-color: var(--default-black-color);
}

[part="tabs"] ::slotted(vaadin-tab) {
    color: var(--default-black-color);
    background-color: var(--default-white-color-2);
    border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;
    MARGIN-RIGHT: 3px;

}

[part="tabs"] ::slotted(vaadin-tab[selected])::before{
    background-color: var(--default-app-color);
    width:100%
} 

*编辑

但是，如果我的组件在我的开槽组件中的 dom 内部，那么我可以以某种方式从我的顶部布局中设置它的样式。在这个例子中，我的意思是如果我可以在 vaadin-vertical-layout 中设置文本区域的输入字段的样式

Answer 1

从您的屏幕截图来看，vaadin-button 不在任何影子根中。在这种情况下，您可以从全局样式中对其进行样式设置。

例如styles.css

vaadin-button.close-tab-btn {
  background-color: red;
}

并用类似的东西导入它

@CssImport("./styles/styles.css").