Tutorial - Material UI (MUI) and ClojureScript

ยท

1 min read

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!

Oficjal 2.png

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

ย