样式化 vaadin-input-container

Question

如何通过通用设置 Vaadin Flow v.22 vaadin-input-container 中的新元素样式 css?

@CssImport(value = "./themes/mystyle/components/vaadin-input-container.css", themeFor = "vaadin-input-container")

和

[part="input-field"] {
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
  background-color: var(--lumo-base-color);
}

无效。

谢谢！

Answer 1

vaadin-input-container 本身就是 [part="input-field"]，即 [part="input-field"] 不是 vaadin-input-container 的 child。因此，您需要使用 :host 作为选择器。

:host {
   box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
   background-color: var(--lumo-base-color);
}