CSS styling of components, unexpected sideffects

[johncloud200]

johncloud200 @johncloud200 20:38
<q-chip pointing=“up” color=“primary”>up</q-chip>
I try the example q-chip, just got rounded without pointing(arrow), why?

johncloud200 @johncloud200 21:57
<q-layout class=“bg-light”>
<q-chip pointing=“up” color=“primary”>up</q-chip>
</q-layout>
I just remove class=“bg-light”

Laurent @spectrolite 22:02
So background color was = to text color?

Laurent @spectrolite 22:04
And removing bg-light from wrapping div fixed your problem?

johncloud200 @johncloud200 22:06
yes

Laurent @spectrolite 22:11
All CSS color classes as well as bg-colors (eg. bg-light) have !important
So they should be used mostly on “leaf” dom nodes, to correct the defaults, instead of higher up in the dom, where they can have unexpected sideffects

Laurent @spectrolite 22:16
@johncloud200 pls cut and paste this discussion into a forum topic mentioning @rstoenescu He needs to know about this, and decide whether to add a warning in the docs, or to reinforce the CSS styling of components against these issues.
I m in mobile so it s quite impractical.for.me to do

johncloud200 @johncloud200 22:17
yes I will

Laurent @spectrolite 22:18
Thank you

[spectrolite]

@johncloud200 those gifs are a great addition and make it extremely clear. Thanks.

@rstoenescu please consider this for the UI fixes of 0.14 final.