MUI ThemeProvider not working

[emacsbliss]

I have this clojurescript code:

(ns app.main
  (:require [reagent.core :as r]
            [reagent.dom.client :as rc]
            ["@mui/icons-material/Search" :default SearchIcon]
            ["@mui/material" :refer [Box IconButton CssBaseline ThemeProvider createTheme]]
))

(def current-theme
{:palette {:primary {:main #040509}, :secondary {:main #4cceac}, :neutral {:dark #a3a3a3, :main #666666, :light #141414}, :background {:default #fcfcfc}}, :typography {:fontFamily Source Sans Pro,sans-serif, :fontSize 12, :h1 {:fontFamily Source Sans Pro,sans-serif, :fontSize 40}, :h2 {:fontFamily Source Sans Pro,sans-serif, :fontSize 32}, :h3 {:fontFamily Source Sans Pro,sans-serif, :fontSize 24}, :h4 {:fontFamily Source Sans Pro,sans-serif, :fontSize 20}, :h5 {:fontFamily Source Sans Pro,sans-serif, :fontSize 16}, :h6 {:fontFamily Source Sans Pro,sans-serif, :fontSize 14}}})

(defn get-theme []
  (createTheme (clj->js current-theme))

(defn app []
  (let [theme (get-theme)]
    [:> ThemeProvider {:theme theme}
      [:> CssBaseline]
        [:div {:className "app"}
          [:main {:className "content"}
                 [:> IconButton {:type "button" :sx {:p 1}}
                [:> SearchIcon]]
      ]]]
  ))

There is a button which toggle between dark and light them. The problem seems that the IconButton wrapped in ThemeProvider didn't flip its color (ie, white in dark mode, or black in light mode) when I toggle light/dark mode.

but that behavior works in javascript, so not sure if I missed anything when using reagent for this.

Thanks a lot for help!

[Deraen]

No support questions in here please. This is a place for bug reports and feature requests only.

Support requests and usage questions should go to the #reagent channel in Clojure Slack or the ClojureScript mailing list.

---

Your example doesn't show how the button to toggle the mode state works or how the state is passed to MUI to tell which palette to use. You need to store the state in either a Reagent atom or React state hook, or otherwise tell Reagent to render the whole app again if Reagent isn't able to automatically see what parts need to be re-rendered.