Vaadin 焦点颜色答案

【问题标题】：Vaadin Focus ColorVaadin 焦点颜色
【发布时间】：2021-05-13 10:30:12
【问题描述】：

是否有全局方法来停用焦点颜色？如附件所示？

提前致谢！

最好的问候，托马斯

【问题讨论】：

标签： vaadin vaadin-flow

【解决方案1】：

该边框是“焦点环”（它是一种辅助功能，表示该字段已从键盘交互获得焦点，但它不会显示使用鼠标聚焦场）。

焦点环的样式取决于每个组件和主题。

例如，Lumo 中 TextField 的焦点环是 input-field 部分中的 CSS box-shadow：

:host([focus-ring]) [part="input-field"] {
  box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
}

:host([invalid][focus-ring]) [part="input-field"] {
  box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
}

查找这些样式的一种便捷方法是检查组件的影子 DOM 中的 <style> 标签

您可以使用

覆盖 vaadin-text-field 的焦点环

:host([focus-ring]) [part="input-field"] {
  box-shadow: none !important
}

然后，您 import the stylesheet 与 @CssImport 与 themeFor="vaadin-text-field" 或 registerStyles。

【讨论】：

今天另一种推荐的导入组件样式表的方法是使用自定义主题（自 V19 和 V14.6 起）：vaadin.com/docs/latest/ds/customization/custom-theme/…
非常感谢您的详细解释！我还有一个简短的问题：是否有一种针对所有组件（文本字段、组合框、...）和完整应用程序的全局方法？也许在我也有我的一般颜色的styles.css中（例如“--lumo-primary-color”）？
不，因为默认的焦点环基于主题颜色（也用于设置其他事物的样式），并且每个组件都以不同的方式应用样式。但是，许多组件在内部使用 vaadin-text-field（组合框、日期选择器等），因此文本字段的修复也应该适用于它们，