Bad transformation by `create-theme`

[egg-juxt]

The create-theme takes theme objects as a Clojure map. It converts those to a JS object, then applies MUI createTheme function, and converts back to a Clojure map. In this final conversion it is transforming JS keys such as backgroundColor, to background-color, which is actually not supported by Emotion and raises errors at the browser console: "Using kebab-case for css properties in objects is not supported."

[joshuamzm]

We started to notice this very same behavior in our application. Our designer started to further customize the app through a custom theme and noticed that personalized components' styling keys are been passed in kebab-case.

This theme setup yields the error shown in the following screenshot:

[styles/theme-provider (styles/create-theme custom-theme) ... ]

There are two possible workarounds for this problem, as accurately mentioned by the OP's observations. Either transform the create-theme result back to a JS object, or directly use mui-styles/createTheme with the JS version of your custom theme. I rather prefer the former because it is slightly simpler. Nevertheless, this issue should be something that the theme-provider wrapper would automatically handle. Would it be safe to apply clj->js' directly to the theme in the wrapper definition?

[styles/theme-provider (clj->js' (styles/create-theme domo-theme)) ... ]

[arttuka]

Can you give a specific example of an input that causes this? I'm unable to reproduce the error.

[egg-juxt]

create-theme always returns background-color, no matter the input theme data. That causes the error, as it should be backgroundColor.

  (def theme
    {:components {:MuiButton {:variants
                              [{:props {:variant :contained}
                                :style {:backgroundColor "#121A20"}}]}}})

  ; background-color!!!
  (-> (reagent-mui.styles/create-theme theme)
    :components)

  ; alternative that I am using:
  (defn create-theme [options]
    (mui-material-styles/createTheme (reagent-mui.util/clj->js' options)))

  ; backgroundColor ✓
  (-> (create-theme theme)
    (.-components))

[arttuka]

This should be fixed in version 5.11.12-0.