Ionic component styles not applied inside custom components

I am using the latest version of ionic (CLI 3.19.0) and started a blank project. I added a lazy loaded home page and then created a custom component called <custom-item>. I can get it to load fine by adding schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to my app.module.ts but if I use Ionic components inside this custom component, the ionic styles do not get applied.

My home page contains:

<ion-content padding>
  <button ion-button color="primary">Button outside of component</button>

this first button displays fine with the Ionic styles.
Inside the <custom-item> I have:

  <button ion-button color="primary">Button inside of component</button>

…so these two buttons should be identical. In my case, the button inside my custom component just shows up as a small grey button. Anyone had this problem before?


Thanks for pointing me in the right direction Rob. Here’s the short version of the solution:
(Remember that this is to apply Ionic styles inside custom components who are lazy loaded)

You need to import IonicModule in your share components.module.ts

Here is copy of a cleaned up copy of my components.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { EventRowComponent } from './event-row/event-row';
import { IonicModule } from "ionic-angular";

  declarations: [ EventRowComponent ],
  imports:      [ IonicModule ],
  exports:      [ TranslateModule, EventRowComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ]
export class ComponentsModule {}

You need to add CUSTOM_ELEMENTS_SCHEMA to be able to use custom components. To be able to apply ionic styles inside your custom components, you need to import IonicModule.


You need to import your custom module into app.module.ts like below and it worked for me.

imports: [
tabsHideOnSubPages: true,

I discovered a strange behavior. If I use this code

<button ion-button color="primary">Button inside of component</button>

the button is little and white. Instead if I use this code:

<ion-button color="primary">Button inside of component</ion-button>

it’s styled correctly.

Somebody can explain me why?
Thanks a lot.

1 Like

So i think one syntax is ionic 3 and below and the other is ionic 4, you must be using ionic 4 where this change came in


Replaced this

<button ion-button>