Fork me on GitHub
#emotion-cljs
<
2020-06-12
>
y.khmelevskii00:06:09

can you please share example? You are able to use className , class-name and class without any problems

fabrao14:06:03

(ns app.core
  (:require
   ["react-dom" :as rdom]
   [helix.dom :as d]
   [helix.core :as hx :refer [$ <>]]
   ["@material-ui/core/styles" :refer [makeStyles]]
   ["@material-ui/core/Button" :default Button]
   ["@material-ui/core/card" :default Card]
   ["@material-ui/core/CardContent" :default CardContent]
   [emotion.core :refer [defstyled]]
   [applied-science.js-interop :as jsi]
   [cljs-bean.core :refer [->js]]
   [app.lib :refer [defnc]]))

(defstyled Center "div"
           {:position "absolute"
            :top "50%"
            :left "50%"
            :transform "translate(-50%, -50%)"})

(defstyled PainelLogin Card
           {:backgroundColor "blue"})

(defstyled Conteudo CardContent
           {:width 650
            :fontSize 40})

(defstyled stBotao Button
           {:background "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"})

(defnc Botao [{:keys [class-name children] :as resto}]
       ($ stBotao (merge resto {:className class-name}) children))

(defnc App []
       (let [botao (makeStyles (->js {:botao {:background "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"}}))
             fifi (botao)]
         (js/console.log (jsi/get fifi :botao))
         (js/console.log ($ Button "Fernando"))
         ($ Button {:className (jsi/get fifi :botao)} "Fernando")
         ($ Botao "Fernando")))

(defn ^:export start
  []
  (rdom/render ($ App)
    (js/document.getElementById "app")))
I did direct with makeStyles from Material-UI and tried to use with emotion-cljs. The result in html is Botao has class-name prop, not added in class as to be.