代码之家 › 专栏 › 技术社区 › Steffen Harbich

如何更改Vaadin 10中组合框的样式

vaadin-flow vaadin10 shadow-dom vaadin css

0

Steffen Harbich · 技术社区 · 6 年前

我想调整组合框组件的CSS。组合框有我的样式类 custom1 已添加,应禁用左角的边框半径。

在我的 共享样式.html ,我尝试调整CSS属性:

.custom1 {
    --lumo-border-radius: 0px;
}

这改变了风格,但这并不是我想要的。根据 docs ,我应该跟着 this wiki 为Web组件应用本地范围样式。所以,我试过:

<custom-style>
<style>
...
</style>
</custom-style>
<dom-module id="my-combo-box-theme" theme-for="vaadin-combo-box">
  <template>
    <style include="vaadin-combo-box-default-theme">
       :host(.custom1) [part="input-field"] {
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
       }
    </style>
  </template>
</dom-module>

但是,它不起作用 input-field 位置如下:

<vaadin-combo-box>
    <vaadin-text-field>
        ...
            <div part="input-field">
                ...
            </div>
        ...
    </vaadin-text-field>
</vaadin-combo-box>

我想这是个问题,因为它是影子dom下的影子dom? 我该如何设计那个部分?

2 回复 | 直到 6 年前

1

3

Jouni 6 年前

您需要一个样式/主题模块 vaadin-text-field 它为 border-radius ,然后可以从样式/主题模块调整 vaadin-combo-box .

这里是瓦丹论坛上的一个类似答案(用于 text-align ): https://vaadin.com/forum/thread/17197360

2

1

Maciej Piotr Przepióra 6 年前

这是可行的(至少在最新的铬)。

<dom-module id="my-combo-box-theme" theme-for="vaadin-text-field">

    <template>

        <style>

            /* styling for combo-box */

            :host-context(vaadin-combo-box.custom1) [part="input-field"] {

                border-top-left-radius: 0px;

                border-bottom-left-radius: 0px;

            }

        </style>

    </template>

</dom-module>

这里的关键是使用 :host-context 仅目标的CSS规则 text-field 如果低于 vaadin-combo-box

主机上下文 基本上允许在shadowdom中以shadowdom为目标

更深入的描述 主机上下文 可在MDN上找到: https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()