If this helps, I wrote a fulcro wrapper lib for material-ui for my own projects. https://github.com/MrEbbinghaus/fulcro-material-ui-wrapper I use it extensively in this repo: https://github.com/hhucn/decide3/

@U4VT24ZM3, do have plans to go to MaterialUI 5?

Yes, I do. (there is a v5 branch already) BUT. There are some problems with shadow-cljs & CommonJS VS ES6 modules ...and... I don't know anything about these JS terms 😅. It works with :es5 as :output-feature-set in shadow-cljs. (https://github.com/MrEbbinghaus/mui5-shadow-cljs-issue-repro) Or if you set:

:js-options {:entry-keys ["module" "browser" "main"]}

Got it, OK, it does not seem like there is a good foundation for MUI 5 yet. I probably have to wait.

I don't see any benefit in trying to use the reagent wrapper. If you check it, you notice that it's just a bunch of adapt-react-class calls, so even with reagent, you would save one line per component you use. And then you have reagent components, not fulcro components, meant to be used in hiccup, which is not used in fulcroi

Even when I was using re-frame, I didn't see any point in a wrapper lib for MUI, I just used it as is

@U8ZQ1J1RR, that is what I have been trying to do but I got stuck with https://material-ui.com/components/avatars/, where I tried to apply the classes.green to the avatar. I have been told that wrapping such objects is not so easy, thats why I have been looking for an alternative.

@U8ZQ1J1RR Well, the job of a wrapper is just to make code more accessible. Just for the fact that Cursive doesn't give me "cannot be resolved" warnings everywhere or that I have to wrap everything in cljc files in #?(:cljs ), it's worth it for me.

@U012GN57FJ9 But that's CSS-in-JS stuff, not necessary MUI specific. You can do the same with fulcro. (See: https://github.com/fulcrologic/fulcro-garden-css)

@U4VT24ZM3, the Material UI styling is actually a JS object. So the classes.green is a JS object, and I am struggling to pass it. It is not just css, it actually sets a number of css values to achieve a result. When I apply the CSS, it does not look nearly as good.

Ah. You're right. You have the theme stuff in there as well.

I used the theme hook, when I needed the theme object. (let [get-contrast-text (get-in (styles/use-theme) [:palette :getContrastText])])

Wait what? classes.green shouldn't be a JS object, but a string, right? Because classNames takes in a string and in the demos on MUI site you can see in devtools that they really are passed straight to the DOM

classes certainly is a JS object, that might be given via props, but also could just as well come from a global map

I tried passing them in as string.

Like in https://material-ui.com/guides/interoperability/#plain-css?

I asked question in #clojurescript, https://clojurians.slack.com/archives/C03S1L9DN/p1631399751068800, and got this answer.

The classes prop is a different story, that's an object

Yeh, wish it was a bit easier. I could not make heads or tails out of it.

Of course this slack app doesn't know how to open links to itself 😩

But yes. If you use the useStyles, it gives you an object of autogenerated classnames

Yes, they make a beautiful avatar, mine is not nearly as good.

Still, the classes.organge and classes.purple are strings. For example jss856 and jss857 this time I'm looking at the Avatar demos

The useStyles is just a helper that injects those styles to the dom, and creates a unique string for them. In more fancy use, it could generate classnames for combinations of styles for better performance

See if this makes sense.

Anyway, you don't have to use it, if you don't want that complicated CSS system

Yes, it does make sense. Nowhere in there is there indication that classes.green would be a JS object, I think somewhere some confusion crept in

And yes, useStyles is a hook. There is a way to use them in Fulcro, but I haven't yet tried it

Honestly, I just do not really have the bandwidth to learn CSS + JS, I was hoping that I can just hook things in. But it seems like JS/CSS knowledge is still required.

Well, yes

Or you can go with defaults

But in this case you don't really have to know any extra JS or CLJS to get some extra styling: just pass strings, and make sure you have a CSS file loaded that provides styles to those classnames

You do get cascades, and you have to keep track of all the classes yourselves, but it's manageable for small enough projects. After all, that's how websites used to be developed.

Yes, I have been doing that, but of course it is now working out as nicely as when they demo the hooked styling.

Using CLJS, no matter with reagent or fulcro, with React or other JS libraries is not going to work without knowing JS too. The interop is much more on your face than Java usually is on Clojure side