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

问题描述

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

I would like to adapt a combo box component's CSS. The combo box has my style class custom1 added which should disable border radius for left corners.

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

In my shared-styles.html, I tried to adapt CSS properties:

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

这正在改变样式，但这并不是我想要的.根据 docs ，我应该关注此Wiki 为Web组件应用本地范围样式.所以，我尝试了:

This is changing the styles but it is not exactly what I want. According to docs, I should follow this wiki to apply local scope styles for the web component. So, I tried:

<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部分的位置如下:

However, it didn't work and the part input-field is located like that:

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

我猜这是一个问题，因为它是影子DOM下的影子DOM? 如何为该零件设置样式?

Which is a problem I guess, because it is a shadow DOM under a shadow DOM? How can I style that part?

推荐答案

您需要vaadin-text-field的样式/主题模块，该样式/主题模块公开了border-radius的新自定义属性，然后您可以从style/theme模块进行调整用于vaadin-combo-box.

You need a style/theme module for vaadin-text-field which exposes a new custom property for border-radius, which you can then adjust from the style/theme module for vaadin-combo-box.

以下是Vaadin论坛上的类似答案(针对text-align): https://vaadin. com/forum/thread/17197360

Here’s a similar answer on the Vaadin Forum (for text-align): https://vaadin.com/forum/thread/17197360

这篇关于如何在Vaadin 10中更改组合框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！