Ionic 4: How to overwrite style in Shadow elements that are not controlled by css variables?

Question

I have to style a small app built with Ionic 4

The HTML is:

  


        
                      

              相关标签:
       
      

Answer 1

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:

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

}

Let me know if this helps.