离子4：如何在不受CSS变量控制的Shadow元素中覆盖样式？ [英] Ionic 4: How to overwrite style in Shadow elements that are not controlled by css variables?

问题描述

我必须设计一个使用Ionic 4构建的小型应用程序

I have to style a small app built with Ionic 4

HTML是：

<div class="searchbar-wrapper">
  <ion-searchbar></ion-searchbar>
</div>
<div class="content-wrapper" #scrollingBlock>
  Content
</div>

我需要摆脱Ionic默认添加到其许多元素中的阴影。我可以在Chrome devtools中看到这样的搜索栏：

I need to get rid of the shadow that Ionic by default adds to lots of its elements. I can see in Chrome devtools the searchbar like this:

    .searchbar-input.sc-ion-searchbar-md {

       ...
       -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
       box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    }

理论上，我只需要设置 box-shadow strong>，并且 webkit-box-shadow 等于无。
但是，我什至不能覆盖盒子阴影，因为它在Shadow元素中，并且没有控制阴影的变量。像--box-shadow之类的东西。

In theory I just need to set the box-shadow and the webkit-box-shadow equal to none. However, I can not even overwrite the box-shadow because it is in a Shadow element and there is not variable that control the shadow. Something like --box-shadow.

问题：

怎么可能我杀死了来自Ionic的样式，这些样式不是由变量控制的，而是处于阴影元素中？

How could I "kill" styles coming from Ionic that are not govern by a variable and are in shadow-elements?

推荐答案

ion-searchbar ，因为其他一些元素暴露了访问基础输入元素的方法-getInputElement 。那应该允许您根据需要添加样式。以下是使用Ionic 4.11.5的方法：

ion-searchbar as some other elements expose a method to access underlying "input" element - getInputElement. That should allow you to add styles if needed. Below is how you can do that with Ionic 4.11.5:

模板保持不变，但是在ts文件中，您可以这样做：

Template remains the same, but in ts file you could do:

import { IonSearchbar } from '@ionic/angular';
///
export class MySearchPage {

    @ViewChild(IonSearchbar, { static: false }) searchbar: IonSearchbar;
    ///
    ngAfterViewInit() {
        this.searchbar.getInputElement().then((searchbarInputElement)=>{
      searchbarInputElement.style.boxShadow = "none";
        // in case you need to style its parent as well:
        //searchbarInputElement.parentElement.style.boxShadow = "none";
    })
  };

}

让我知道是否有帮助。

这篇关于离子4：如何在不受CSS变量控制的Shadow元素中覆盖样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！