Fork me on GitHub
Timofey Sitnikov10:09:54

Good morning! I wanted to see if anyone tried with Fulcro? I am assuming the library needs to be used with Reagent, but since both Fulcro and Reagent are React based, can the library work with Fulcro out of the box?

Björn Ebbinghaus10:09:56

If this helps, I wrote a fulcro wrapper lib for material-ui for my own projects. I use it extensively in this repo:

Timofey Sitnikov11:09:45

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

Björn Ebbinghaus11:09:11

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. ( Or if you set:

:js-options {:entry-keys ["module" "browser" "main"]}
But that resulted in other compiler errors for me.

Timofey Sitnikov12:09:33

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

Timofey Sitnikov15:09:11

@U8ZQ1J1RR, that is what I have been trying to do but I got stuck with, where I tried to apply the to the avatar. I have been told that wrapping such objects is not so easy, thats why I have been looking for an alternative.

Björn Ebbinghaus15:09:58

@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.

Björn Ebbinghaus15:09:42

@U012GN57FJ9 But that's CSS-in-JS stuff, not necessary MUI specific. You can do the same with fulcro. (See:

Timofey Sitnikov15:09:19

@U4VT24ZM3, the Material UI styling is actually a JS object. So the 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.

Björn Ebbinghaus15:09:07

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

Björn Ebbinghaus16:09:25

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


Wait what? 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

Timofey Sitnikov16:09:51

I tried passing them in as string.


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

Timofey Sitnikov16:09:50

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

Timofey Sitnikov16:09:55

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

Timofey Sitnikov16:09:22

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 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

Timofey Sitnikov16:09:31

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.

Timofey Sitnikov16:09:01

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