> 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 clojurescript+unsubscr...@googlegroups.com. To post to this group, send email to clojurescript@googlegroups.com. Visit this group at https://groups.google.com/group/clojurescript.