On Sunday, February 5, 2017 at 5:48:06 PM UTC, Thomas Heller wrote:
> > 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
Thanks got it. My mistake was mixing reagent's markup with yours. Would you say
this is an alternative, similar to how shadow.markup relates to om.dom?
--
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.
