Я использую Vaadin Flow 23 и хочу применить нестандартный стиль к элементам Button
(<vaadin-button>
).
Я добавил файл /frontend/component-styles/button.css
, в котором я применяю некоторые стили непосредственно к самой кнопке (без конкретного варианта темы или состояния):
:host {
border: 1px solid #AEB136;
}
Я включил это, добавив @CssImport
в класс Java следующим образом:
@CssImport(value = "./component-styles/button.css", themeFor = "vaadin-button")
Проблема в том, что этот стиль применяется не только к элементам <vaadin-button>
, но и к элементам <vaadin-menu-bar>
, точнее к элементам <vaadin-menu-bar-button>
, которые они содержат. Этого не происходит, если я указываю конкретный вариант темы или состояние :hover
или [active]
.
Нужно ли мне делать что-то особенное, чтобы стили :host { }
применялись только к <vaadin-button>
, а не к <vaadin-menu-bar-button>
?
Обновлять
Я заметил, что могу использовать :host(vaadin-button) { }
, чтобы применить его только к <vaadin-button>
, но я подумал, что themeFor = "vaadin-button"
позаботится об этом?
Кнопка строки меню расширяет компонент кнопки и, следовательно, его стили.
Если вы хотите стилизовать только кнопку, вы также можете использовать vaadin-button
в качестве селектора в глобальном styles.css
.
themeFor
указывает, в какой компонент следует внедрить css, но не препятствует наследованию стилей подклассам этого компонента.