Ionic 4 styling problem

Ionic Framework
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