Question

我阅读了 CSS 样式部分 (https://vaadin.com/docs/v14/flow/styling/styling-components)，它提到全局 CSS 不会影响 shadow DOM 中的“INPUT”字段，因此必须将样式添加到 shdaow DOM，但不幸的是没有明确说明如何将样式添加到 shadow DOM。注意。我主要使用 Flow 纯 Java 和一些 CSS。

我尝试从组件中检索 elementt，然后检索 shadowRoot，然后从 root 中检索“input”元素以向其添加样式，不幸的是这不起作用，shadowroot 为 null（此代码从 onAttach() 方法执行视图类）

private void setTextAlignCenterForTextFields(TextField textField) {
        //find the internal 'Input' and set the styling to text-align=center, unfortunately
        // you cant do that with global css, since the 'input' element is in shadow root
        textField.getElement()
                .getShadowRoot()
                .get()
                .getChildren()
                .filter( elem -> "INPUT".equalsIgnoreCase(elem.getTag()))
                .forEach(inputElem -> inputElem.getStyle().set("text-align", "center"));
    }

任何想法将不胜感激。我使用的是 Vaadin 版本 14.5.1。

Answer 1

已经有一个主题变体来对齐文本

centerTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);

见https://vaadin.com/components/vaadin-text-field/java-examples/theme-variants

关于如何将CSS附加到shadow root上，基本使用themeFor，见https://vaadin.com/docs/v14/flow/styling/importing-style-sheets/#component-styles

Answer 2

您可以使用 CSS 来定位 value 部分：

.textfieldClass::part(value) {
  text-align: center;
}

此视频解释了样式化 CSS 部分：https://youtu.be/Y0uxb4ga44Y

如何在 Vaadin TextField 中居中对齐文本

2 个答案: