Snippet example of using library cljs-react-material-ui with Reagent

cljs-react-material-ui-reagent-example.cljs

(ns crmui-reagent.core
  (:require
    [cljsjs.material-ui]
    [cljs-react-material-ui.core :as ui]
    [cljs-react-material-ui.reagent :as rui]
    [cljs-react-material-ui.icons :as ic]
    [reagent.core :as r :refer [atom]]
    [reagent.session :as session]
    [secretary.core :as secretary :include-macros true]
    [accountant.core :as accountant]
    ))

(enable-console-print!)

(defn my-component []
  (r/create-class
    {:component-did-mount #(println "component-did-mount")
     :display-name        "my-component"
     :reagent-render      (fn []
                            [rui/paper "My component"])}))

(defn some-other-component [text]
  [rui/paper text])

;; -------------------------
;; Views


(defn user-menu []
  (r/create-class
    {:component-did-mount #(println "user-menu-did-mount")
     :display-name        "user-menu"
     :reagent-render      (fn []
                            [rui/icon-menu {:icon-button-element (ui/icon-button {:touch true} (ic/navigation-expand-more))}
                             [rui/menu-item {:primary-text "Edit Profile"}]
                             [rui/menu-item {:primary-text "Logout"}]])}))


(defn home-page []
  (r/create-class
    {:component-did-mount
     #(println "home-page did mount")
     :reagent-render
     (fn []
       [rui/mui-theme-provider
        {:mui-theme (ui/get-mui-theme
                      {:palette {:text-color (ui/color :green600)}})}
        [:div
         [rui/app-bar {:title              "Title"
                       :icon-element-right (ui/icon-button
                                             (ic/action-account-balance-wallet))}]
         [rui/paper
          [user-menu]
          [:div "Hello there"]
          [my-component]
          [some-other-component "What time is it?"]
          [rui/mui-theme-provider
           {:mui-theme (ui/get-mui-theme {:palette {:text-color (ui/color :blue200)}})}
           [rui/raised-button {:label "Blue button"}]]
          (ic/action-home {:color (ui/color :grey600)})
          [rui/raised-button {:label        "Click me"
                              :icon         (ic/social-group)
                              :on-touch-tap #(println "clicked")}]]]])}))

(defn about-page []
  [:div [:h2 "About crmui-reagent"]
   [:div [:a {:href "/"} "go to the home page"]]])

(defn current-page []
  [:div [(session/get :current-page)]])

;; -------------------------
;; Routes

(secretary/defroute "/" []
                    (session/put! :current-page #'home-page))

(secretary/defroute "/about" []
                    (session/put! :current-page #'about-page))

;; -------------------------
;; Initialize app


(defn mount-root []
  (r/render [current-page] (.getElementById js/document "app")))

(defn init! []
  (accountant/configure-navigation!
    {:nav-handler
     (fn [path]
       (secretary/dispatch! path))
     :path-exists?
     (fn [path]
       (secretary/locate-route path))})
  (accountant/dispatch-current!)
  (mount-root))

Well, it's because reagent doesn't parse it's syntax in component attributes, only in component body. And material-ui expects there react components, not reagent. Tho it's true I might add this as-element conversion into library for attributes where react component is expected.

The reason for wrong styling is probably, cuz when u use create-class, component-will-mount, etc. that creates another element, which wraps rui/icon-menu, so u might have to play with styling little bit with this user-menu element. Maybe there's other solution, but I don't know now.