如何使用CSS文件更改vaadin-icon的笔画宽度？

ijxebb2r 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(116)

我想使用CSS文件修改vaadin-iconstroke-width，但是我在CSS文件中的修改对图标没有任何影响。我只想对应用程序中一个地方的一个图标做这个修改，而不是对整个应用程序。我使用的是Vaadin 23和Lit-element。
任何原因和解决方案都是受欢迎的。

${mobile ? html`
           <span class="closing-icon">
                <vaadin-icon class="close-big" @click=${(e) => this.$server.close()} icon="vaadin:close" > </vaadin-icon>
           </span>`
        : ''}

CSS文件

span vaadin-icon svg g path{
    stroke-width:0.1; 
}

css

来源：https://stackoverflow.com/questions/75324221/how-to-change-the-vaadin-icon-stroke-width-using-a-css-file

1条答案

按热度按时间

lkaoscv71#

svg元素位于<vaadin-icon>组件的shadow DOM中，您需要将样式注入shadow DOM中才能应用。
如果您正在构建VaadinFlow或Hilla应用程序，则可以使用自定义主题和特定于组件的样式表来完成。
frontend/themes/mytheme/components/vaadin-icon.css：

path {
 stroke-width: 0.1; 
}

如果没有，可以使用ThemableMixin包中的registerStyles函数：

import {registerStyles, css} from '@vaadin/themable-mixin';

registerStyles('vaadin-icon', css`
  path {
   stroke-width: 0.1; 
  }
`);

赞(0）回复(0）举报 2023-02-06

我来回答

如何使用CSS文件更改vaadin-icon的笔画宽度？

1条答案

相关问题

热门标签

最新问答