This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-09-13
Channels
- # announcements (2)
- # aws (4)
- # babashka (14)
- # beginners (186)
- # cljdoc (2)
- # cljsrn (7)
- # clojure (56)
- # clojure-austin (1)
- # clojure-australia (2)
- # clojure-europe (46)
- # clojure-france (5)
- # clojure-nl (16)
- # clojure-norway (7)
- # clojure-spec (76)
- # clojure-sweden (15)
- # clojure-uk (13)
- # clojurescript (60)
- # code-reviews (2)
- # conjure (8)
- # datascript (1)
- # datomic (4)
- # depstar (10)
- # emacs (9)
- # events (4)
- # exercism (1)
- # fulcro (36)
- # graalvm (8)
- # introduce-yourself (3)
- # jobs-discuss (2)
- # kaocha (14)
- # lsp (1)
- # minecraft (8)
- # new-channels (1)
- # off-topic (3)
- # pathom (6)
- # polylith (9)
- # re-frame (48)
- # shadow-cljs (5)
- # specter (26)
- # tools-deps (19)
- # vim (2)
- # vscode (1)
Good morning! I wanted to see if anyone tried https://github.com/arttuka/reagent-material-ui 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?
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"]}
But that resulted in other compiler errors for me.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.
I asked question in #clojurescript, https://clojurians.slack.com/archives/C03S1L9DN/p1631399751068800, and got this answer.
Yeh, wish it was a bit easier. I could not make heads or tails out of it.
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.
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.
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.