Ваадин компонент CSS для конкретного класса

Question

Я пытаюсь удалить стиль фокуса ячейки сетки из каждого экземпляра Grid, который использует определенный класс CSS.

CSS

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

прекрасно работает, но применяет стилизацию ко всем экземплярам Grid в моем приложении.

Я попытался сделать это применить конкретно к классу CSS с помощью:

.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, что заставляет мою реализацию не работать.

Как я могу ссылаться на CSS компонента Vaadin и применять его только к определенным классам CSS, которые я указываю?

Answer 1

У меня было такое же требование, и для меня работал следующий стиль:

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

Обратите внимание на пространство между .mygrid а также .v-grid-cell-focused:before что означает, чтобы выбрать не только прямые дети (как вы сделали с >).