时间戳

首页 > 解决方案 > 如何在 Vaadin 10 中更改组合框的样式

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

问题描述

我想调整组合框组件的 CSS。组合框添加了我的样式类custom1，它应该禁用左角的边框半径。

在我的shared-styles.html中，我尝试调整 CSS 属性：

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

这正在改变风格，但这并不是我想要的。根据docs，我应该按照这个 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？我该如何设计那部分？

标签： cssvaadinshadow-domvaadin10vaadin-flow

解决方案

您需要一个样式/主题模块，vaadin-text-field该模块为其公开一个新的自定义属性border-radius，然后您可以从样式/主题模块中对其进行调整vaadin-combo-box。

这是 Vaadin 论坛上的类似答案（for text-align）：https ://vaadin.com/forum/thread/17197360

推荐阅读