离子 4 如何更改：css 中的阴影 dom？

Posted 2023-03-06

【中文标题】离子 4 如何更改：css 中的阴影 dom？

【英文标题】：ionic 4 how to change :shadow dom in css?

【发布时间】：2019-09-28 07:08:01

【问题描述】：

离子选择的css问题，在阴影根中有一个按钮。我需要默认值 --padding-top:10px,--padding-end:8px,--padding-bottom:10px,--padding-start:16px ，但它是第一个元素并假定应用的值如下所示。

下图包含离子选择的颜色框，无法控制此框的大小。离子选择的代码如下。有人可以帮我吗？

<ion-col size="2" style="padding:0">
            <div class="colorselect color_color.slice(1,7)">

                <ion-select >
                  <ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" >optioncolor
                  </ion-select-option>
                </ion-select>
            </div>
          </ion-col>

【参考方案1】：

试试这个包的 shadow-dom 元素。工作得很好。 在 NPM 上搜索 Shadow-DOM-inject-styles。它可以让你设置阴影元素的样式

【参考方案2】：

试试这个。它对我有用

ion-select
    --padding-top:12px !important;
    --padding-end:12px !important;
    --padding-bottom:12px !important;
    --padding-start:20px !important;