search

CanopyTax / kremling

Embarrassingly simple css for React
https://kremling.js.org
Apache License 2.0
36 stars 4 forks source link

{...scope} not necessary in children? #39

Closed dvnrsn closed 5 years ago

dvnrsn commented 5 years ago

Is it intentional that children of parents that use kremling’s useCss don’t seem to require a spread of scope into a DOM-like element? The styling is applied with a simple invocation of useCss(css) https://stackblitz.com/edit/react-x6tbha

joeldenning commented 5 years ago

You have to put in & into your inline css rules, otherwise they are global.

There normally is a console warning though when you don't do that. The lack of a warning might a bug in itself, though, if you want to look into it.

geoctrl commented 5 years ago

Yes - this is the beauty of Kremling! By declaring the scope at the parent-level, all children inherit that scope.

If the children require a separate css scope, you can just declare a new one.

dvnrsn commented 5 years ago

If I understand you correctly, Joel, the style becomes global to wherever the the furthermost parent spreads useCss? I could understand it the other way (i.e., parent to child) but up the tree seems strange.

This doesn't exactly address my question of why kremling would not require each child component that uses CSS to follow the syntax:

const scope = useCss(childCss)
return <div {...scope}>

Instead in the child component I get the styling to work no problem with only invocation (see stackblitz):

useCss(childCss)
return <div>
joeldenning commented 5 years ago

the style becomes global to wherever the the furthermost parent spreads useCss?

No. The style becomes completely global if it's an inline string and doesn't have the & in it. Not scoped in any way. Just a global css class.

This doesn't exactly address my question of why kremling would not require each child component that uses CSS to follow the syntax:

Yes it does. If you put & into your css string as required by kremling, it will not work at all unless you put {...scope} onto a dom element.

joeldenning commented 5 years ago

For more reading, see What about that ampersand in the css string? and https://kremling.js.org/concepts/scoped-css.html.

Closing this since this doesn't appear to be an issue with kremling, but just a misunderstanding of the need for &. Feel free to comment further or reopen.

dvnrsn commented 5 years ago

Introducing the ampersand to my child's styling string does indeed remove it from scope. I see what you mean now. Thanks for the response.