特定 class 的 Vaadin 组件 CSS

Question

我正在尝试从每个使用特定 CSS class.

的网格实例中删除网格单元格焦点样式

CSS

.v-grid-cell-focused:before {
    display: none !important;
}

效果很好，但我的应用程序中的所有 Grid 实例都应用了样式。

我已经尝试通过以下方式使其专门应用于 CSS class：

.mygrid.v-grid-cell-focused:before {
    display: none !important;
}

或

.v-grid-cell-focused.mygrid:before {
    display: none !important;
}

或

.mygrid > .v-grid-cell-focused:before {
    display: none !important;
}

但不会导致默认行为发生任何变化。

以下我已经成功使用了CSS

.v-grid-cell.anotherGrid {
    background-color: #07a9ca;
    color: #000;
}

唯一采用上述样式的网格是我分配给样式名称 anotherGrid 的网格。这向我表明，关于 CSS 选择器可能存在复杂性，在我的情况下 :before，加上自定义 CSS classes 导致我的实现无法正常工作。

如何引用 Vaadin 组件 CSS 并将其仅应用于我指定的特定 CSS classes？

Answer 1

我有同样的要求，对我来说，以下样式有效：

.mygrid .v-grid-cell-focused:before {
    display: none !important;
}

注意 .mygrid 和 .v-grid-cell-focused:before 之间的 space，这意味着 select 不仅是直接子代（就像您对 > 所做的那样）。

Vaadin component CSS for specific class