Material UI from Clojurescript

example.cljs

(ns example.login.views
  (:require
   [re-frame.core :as rf]
   [example.login.subs :as subs]
   [example.login.events :as events]
   ["@material-ui/core/Button" :default mui-button]
   ["@material-ui/core/Dialog" :default dialog]
   ["@material-ui/core/DialogTitle" :default dialog-title]
   ["@material-ui/core/DialogContent" :default dialog-content]
   ["@material-ui/core/DialogActions" :default dialog-actions]
   ["@material-ui/core/Grid" :default grid]
   ["@material-ui/core/Link" :default link]
   ["@material-ui/core/TextField" :default text-field]))

(defn button []
  [:div
   [:> mui-button {:color "inherit"
                   :onClick #(rf/dispatch [::events/show-dialog? true])}
    "Login"]
   (let [login-details @(rf/subscribe [::subs/login-form])
         {:example.login.specs/keys [show-dialog?]} login-details
         show-dialog? (true? show-dialog?)]
     [:> dialog {:open show-dialog?
                 :aria-labelledby "form-dialog-title"}
      [:> dialog-title {:id "form-dialog-title"} "Login"]
      [:> dialog-content
       [:> text-field {:autoFocus true
                       :variant "outlined"
                       :margin "normal"
                       :required true
                       :id "name"
                       :label "Username"
                       :fullWidth true}]
       [:> text-field {:variant "outlined"
                       :margin "normal"
                       :required true
                       :id "name"
                       :type "password"
                       :label "Password"
                       :fullWidth true}]
       [:> grid {:container true}
        [:> grid {:item true
                  :xs true}
         [:> link {:href "#"
                   :variant "body2"}
          "Forgot password?"]]]] 
      [:> dialog-actions
       [:> mui-button {:onClick #(rf/dispatch [::events/show-dialog? false])
                       :color "primary"}
        "Cancel"]
       [:> mui-button {:onClick #()
                       :color "primary"}
        "Next"]]])])