Ionic 4：如何覆盖不受css变量控制的阴影元素中的样式？

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

HTML是：

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

理论上，我只需要将框阴影和webkit框阴影设置为无。 但是，我甚至无法覆盖长方体阴影，因为它位于阴影元素中，并且没有控制阴影的变量。像盒子的阴影

问题：

我如何才能“杀死”来自Ionic的样式，这些样式不受变量控制，并且位于阴影元素中？

正如其他一些元素所暴露的那样。这将允许您在需要时添加样式。以下是如何使用Ionic 4.11.5做到这一点：

模板保持不变，但在ts文件中，您可以执行以下操作：

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";
    })
  };

}

---

如果这有帮助，请告诉我。

Rafael，请添加一个简单的工作代码，以便您可以做得更好help@AlanM：不幸的是，爱奥尼亚添加了它自己的“魔力”，因此没有比这几行代码更多的代码。我在那里添加了代码，以防你想添加一些注释和更多细节Shey Rafael，您的问题是可以解决的，但理想情况下，请描述您试图实现的目标？你只想在搜索栏元素中添加框阴影吗？@SergeyRudenko，我想要的正好相反。要消除默认情况下来自Ionic的搜索栏的框阴影

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";
    })
  };

}