Using material-ui.com from cljs. Still a fat build

build.clj

;; this can be used on figwheel or in "any" cljs build api
;; at the first time, create a empty package.json with `{}` inside and `yarn add react webpack webpack-cli react-dom @material-ui/core`
;; you need to run "yarn install" and "yarn webpack" BEFORE this
;; !!!! this is a dev build !!!!
(def dev-build
  '{:id           "dev"
    :source-paths ["src" "dev"]
    :figwheel     {:on-jsload cljs.user/on-jsload}
    :compiler     {:main            cljs.user
                   :asset-path      "/js/out"
                   :elide-asserts   false

                   :infer-externs   true
                   :npm-deps        false
                   :foreign-libs    [{:file           "dist/index_bundle.js"
                                      ;; provides is "what you use in  (require [....])
                                      :provides       ["react"
                                                       "react-dom"
                                                       "material-ui"
                                                       "material-styles"
                                                       "cljsjs.react"
                                                       "cljsjs.react.dom"]
                                      ;; exports "binds" the name from provides on window.LibName, check index.js.
                                      :global-exports {react            React
                                                       material-ui      MaterialUI
                                                       material-styles  MaterialStyles
                                                       cljsjs.react.dom ReactDOM
                                                       cljsjs.react     React
                                                       react-dom        ReactDOM}}]


                   :closure-defines {goog.asserts.ENABLE_ASSERTS true
                                     goog.DEBUG                  true}
                   :output-dir      "resources/public/js/out"
                   :output-to       "resources/public/js/app.js"}})

fulcro.cljs

;; please flow https://clojurescript.org/guides/webpack

(ns client.fulcro
  (:require [material-ui :as m]
            [material-styles :as ms]
            [react :as r]))

(defn factory-apply
  [class]
  (fn [props & children]
    (apply r/createElement class props children)))

(def button (factory-apply m/Button))

(def card-media (factory-apply m/CardMedia))

;;using with jss

(defn get-class
  [this id]
  (aget (-> this .-props .-classes) (name id)))

(defsc Card
  [this {:keys [photo/url
                photo/title]}]
  {:query [:photo/url :photo/title]}
  (card-media #js{:className (get-class this :media)
                  :image     url
                  :title     title}))


(def ui-card (prim/factory ((ms/withStyles #js {:media #js {:height     0
                                                            :paddingTop "56.25%"}}) Card)
                           {:keyfn :photo/url}))

index.js

// please flow https://clojurescript.org/guides/webpack

import React from 'react';
import ReactDOM from 'react-dom';
import * as MaterialUI from '@material-ui/core/index.js';
import * as MaterialStyles from '@material-ui/core/styles';


window.React = React;
window.ReactDOM = ReactDOM;
window.MaterialUI = MaterialUI
window.MaterialStyles = MaterialStyles

reagent.cljs

;; please flow https://clojurescript.org/guides/webpack

(ns client.reagent
  (:require [material-ui :as m]
            [reagent.core :as r]))

(def button (r/adapt-react-class m/Button))
;; more about reagent see https://gist.github.com/mhuebert/4e3af2fbc33b40e74539487e50110a14

webpack.config.js

module.exports = {
  entry: './src/js/index.js',
  mode: 'production',
  output: {
    filename: 'index_bundle.js'
  }
}

You may not need all this alias from https://gist.github.com/souenzzo/7f376efca955660e6221bca7827164ba#file-build-clj-L21
If you get erros like "cljs.custom.react not found", you can add more alias