Just define them inside the element.
(defstyled h1 :h1
[_]
{:color "red"
"@media (max-width: 600px)"
{:color "green"}})
Or put the query inside a def, so you can re-use it.
https://github.com/thheller/reagent-test/blob/1dd4193273984971fd1f8fb9717d804a475785af/src/reagent_test/core.cljs#L5-L12
Alternatively you could use the CSS env as well.
(css/set-env!
{:media
{:smartphone
"@media (max-width: 400px)"}})
(defstyled h1 :h1
[env]
{:color "red"
(-> env :media :smartphone)
{:color "green"}})
I'm not too happy with the set-env! call as it must be called before the first
element is USED (not defined). I call this in my app/init function. Didn't talk
too much about env yet, but that is basically it. Define anything you want in
env, it is passed into every defstyled when the first element is created and
can influence your CSS that way (ie. theming support for re-usable components).
--
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.
