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

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

CSS

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

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

Я попытался применить его конкретно к классу CSS:

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

or

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

or

.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, которые я укажу?


css vaadin-grid vaadin8
person Shiri    schedule 12.07.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

person Steffen Harbich    schedule 12.07.2017
comment
Спасибо! Я не могу поверить, что все, что мне было нужно, это пространство. - person Shiri; 13.07.2017