material_ui_helix.cljs

(ns app.renderer.core
  (:require
    ["@material-ui/core" :refer [AppBar Toolbar Badge Hidden IconButton]]
    ["@material-ui/core/Button" :default Button]
    ["@material-ui/core/styles" :refer [createMuiTheme makeStyles ThemeProvider]]
    ["react-dom" :as rdom]
    [app.renderer.myhelix :refer [defnc]]
    [helix.core :as hx :refer [$ <>]]
    [helix.dom :as d]
    ))

(enable-console-print!)

(def useStyles
  (makeStyles
    (fn [theme]
      (clj->js
        {:root
         {"boxShadow" "none"}

         :flexGrow
         {:flexGrow 1}

         :signOutButton
         {:maginLeft ((.-spacing theme) 1)}}))))

(defnc Topbar
  [{:keys [class on-sidebar-open]
    :as props}]
  (let [classes (useStyles)
        props ( -> props
                  (dissoc :on-sidebar-open)
                  (assoc :class
                         (str (.-root classes) " " class)) )
        ]
    ($ ^:native
       AppBar
       {:& props}
      ($ ^:native
         Toolbar
         (d/div {:class (.-flexGrow classes)
                 :name "Toolbar"})))))

(def theme (createMuiTheme #js {}))

(defnc App
  []
  ($ ^:native
     ThemeProvider {:theme theme}
     (d/div
       ($ Topbar {})
       (d/label "teste")
       ($ ^:native
          Button  {:variant "contained"
                   :color "primary"
                   :on-click (fn [e]
                               (.log js/console "oi"))}
          "Oia ae Felipão"))))

(defn start! []
  (rdom/render ($ App) (js/document.getElementById "app-container")))


(comment
  
    ; (js/console.log "root " (.-root classes))
    ; (js/console.log "props " props)
  )

For future reference, reading through helix's Slack chat I found this:

lilactown
I would recommend not using ^:native metadata
what $ does normally is translates your props map literally. so if you wrote
($ Button {:onClick #(js/alert "hi")} "Hello")
it would literally create a call like
(react/createElement Button #js {:onClick #(js/alert "hi")} "Hello")
this is good, because you can look at the documentation of material UI, see it takes an onClick prop, and write :onClick in your code
marking it as ^:native will automatically change kebab-case to camelCase for you, as well as translate DOM props like :class to :className and :style will be transformed into a JS object from CLJS data
IMO this was a mistake to build into $. it's wrong half the time, because sometimes you want the kebab-case transformation but you don't want :style, or you do want transformation from clj->js in some other prop but it doesn't do that for you so you have to remember which props it does automatically and which do not

clojurians.slack.com - helix

@sdmoralesma thank you referencing this.