How do I customize the ion-searchbar box-shadow by not using the global.scss file Ionic 4

Ionic Framework
1

I have used the global.scss to apply the style and it works:

.searchbar-input {
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #000 !important;
}

Capture
Capture.PNG283×503 6.57 KB

However when I apply the same style to my home.page.scss it doesnt work

Captures
Captures.PNG313×511 7.3 KB

Here is my html :

<ion-content
  ><ion-toolbar color="primary">
    <ion-searchbar ></ion-searchbar>
  </ion-toolbar>
  <div class="ion-padding">
    The world is your oyster.
    <p>
      If you get lost, the
      <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/"
        >docs</a
      >
      will be your guide.
    </p>
  </div>
</ion-content>

Is there anyway I can apply the style to the home.page.scss and having it work?

2

As it is shadow dom, u need to use css variable to style it.

ion-searchbar{
  --color: #000;
  --placeholder-color: #000;
}

U can also inject style using this plugin (not suggested):