CSS breaks with new custom component. What is best practice?

@Catweazle101 wrote:

Hi

I have a general question.
If a custom component breaks the default-ionic-css, what are you doing?
Or maybe should we avoid this?

Scenario:

<ion-footer no-border>
  <ion-toolbar>
    <ion-buttons end>
        <button ion-button icon-only>
            <ion-icon name="alarm"></ion-icon>
        </button>
        <my-basket-button-component>
              <button ion-button icon-only>
                  <ion-icon name="basket"></ion-icon>
              </button>
        </my-basket-button-component>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

In the scenario above, you see for example the my-basket-button-component.
The button looks not same like the other button within the same ion-buttons container.
Because the additional tag…

<my-basket-button-component>

…breaks the default-ionic-css.

What are you doing in such a case?
Avoid this?
Or creating an attribute-directive instead of an custom-component (but how do I have access than to
the child-elements).

Tips are very welcome. thx!

Cheers,
Oliver

Posts: 4

Participants: 2

Read full topic