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

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;

However when I apply the same style to my it doesnt work

Here is my html :

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

Is there anyway I can apply the style to the and having it work?

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

  --color: #000;
  --placeholder-color: #000;

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