> Cheers Thomas. When you have the likes of a containing element. How do you
> handle the wrap when defstyled returns a ReactElement?
>
> (defstyled container :div
> [_]
> {:display "flex"})
Not sure I understand the question? ReactElements can have children, which this
fully supports.
(defstyled things :div
[_]
{:display "flex"})
(defstyled thing :div
[_]
{:flex 1
"&.wide"
{:flex 2}})
(things {}
(thing {} "one")
(thing {:classes ["wide"]} "two")
(thing {} "three"))
If you are talking about styles that should only apply when B is contained in A
you can do this
(defstyled A :div
[_]
{})
(defstyled B :div
[_]
{:normal "styles"
A
{:inside-a "styles"}})
I just relaxed the requirements for nesting a bit, previously you had to wrap
it in a vector and supply a suffix.
(defstyled B :div
[_]
{:normal "styles"
[A ""]
{:inside-a "styles"}})
But with [thheller/shadow-client "1.0.183"] you can do the above version
without the vector. The suffix is so you can refer to parent selectors as well.
I have used this once in my project
(defstyled control-group :div
[_]
{:margin-bottom 20
"&.inline"
{:display "flex"}
"&:last-child"
{:margin-bottom 0}
})
(defstyled control-label :div
[_]
(css/root
{}
(css/rule "&.select"
{:line-height 37})
(css/rule "&.bold"
{:font-weight "bold"})
(css/nested-rule [control-group ".inline"]
{:flex 1})))
(css/...) is the little more verbose syntax, which the maps desugar too. Could
have used a map, wrote that before I had the map syntax.
The result of this is (assuming "test" ns):
div.test--control-group {...}
div.test--control-group.inline {...}
div.test--control-label {...}
;; and the nested rule:
div.test--control-group.inline div.test--control-label {..}
Hope that answers your question.
/thomas
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/clojurescript.
