Ionic 4 styling problem

Ionic Framework
1 
ion-searchbar {
  .searchbar-input-container {
    .searchbar-input {
      border-radius: 10px !important;
      --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07) !important;
      box-shadow: none !important;
    }
  }
}

i have this style on my component’s scss and for some reason it doesn’t work. but when adding this same style on global.scss it works. any idea why?

2

The only way I managed to make this work was like the following with a clean structure:

  1. Create a subfolder in src/theme/ (if not done already), something like my-awesome-app.
    • Filepath: /src/theme/my-awesome-app/.
  2. Inside of the /src/theme subfolder, create a file, you can name it f. e. like ion-custom-searchbar.scss.
    • Filepath: /src/theme/my-awesome-app/ion-custom-searchbar.scss.
  3. Inside of the /src/theme folder, there should be a global.scss per default.
    • Filepath: /src/theme/global.scss.
  4. Inside of the /src/theme/global.scss import the custom ion-custom-searchbar.scss like following:
    • @import './src/theme/my-awesome-app/ion-searchbar (no .scss file ending needed here.

Content of /src/theme/my-awesome-app/ion-custom-searchbar.scss

ion-searchbar[no-shadow] {

	& input {

		box-shadow: none !important;
	}
}

The use of !important is important (:stuck_out_tongue:) otherwise it would take no effect.

And now you can use it like this, note the no-shadow attribute:

<ion-searchbar no-shadow placeholder="Put some awesome search placeholder text here" type="text"></ion-searchbar>

This will make the styling available globally across the app.

Hope it helps!

Cheers
Unkn0wn0x

PS: Of course you can put the styling of the ion-custom-searchbar.sss directly into the /src/theme/global.scss, but with the solution I mentioned just before, you can keep a much cleaner structure for every component.

2 Likes