Tutorial - Material UI (MUI) and ClojureScript

How to use Material UI in ClojureScript?

With shadow-cljs and Reagent this is piece of cake:

1. Start new project e.g.

   lein new reagent-frontend <myproject>
   

2. Install MUI:

   npm install @mui/material @emotion/react @emotion/styled
   

3. Now let's run the server with hot reloading:

   npm install
   npx shadow-cljs watch app
   

   Next actions will be in core.cljs file:
4. Add import:

   (ns myproject.core
    (:require
     [reagent.core :as r]
     [reagent.dom :as d]
     ["@mui/material" :as mui])) ; <---
   

   We will use Material UI's button as an example - other components work the same way.
5. Define our button component (wrapper):

   (defn text-button
    [label]
    [:> mui/Button {:variant "text"} label]) ; <--- here we use MUI component
   

   if you want to learn more about :> and react interop read this.
6. add our new component to home-page which is our main component/container:

   (defn home-page []
    [:div
     [:h2 "Welcome to Reagent"]
     [text-button "Click me!"]])
   

7. The End!

If you find this tutorial interesting, check my newest Clojure and ClojureScript course! - Clojure Hacker.