How should Ionic styles be overriden/customized !important or editing e.g. _item.scss

ionic-v1
1

We need to override the styles Ionic provides for things like the ionic list.
These styles are being set by _item.scss and other files in the scss/ folder.

For example, in _items.scss

.item p {
    color: #666;
    font-size: 14px;
    margin-bottom: 2px;
}

How should these be overridden? Should we use !important (I dont like this) or should we directly edit the _item.scss file?

Problem is that using !important causes an issue with @include mixins where the mixin generates multiple lines. We then have to put !important into the mixin! I hate using !important, as you can go crazy with it.

We can’t simply add a .item p style in our own CSS as we are using the BEM naming convention in which we cant use the CSS cascading.

Any suggestions?

1 Like
2

I’m wondering the same thing. Anyone?