This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-04-05
Channels
- # aleph (2)
- # announcements (3)
- # architecture (5)
- # beginners (51)
- # biff (5)
- # cider (1)
- # clerk (8)
- # clj-kondo (6)
- # cljsrn (5)
- # clojure (31)
- # clojure-europe (42)
- # clojure-nl (1)
- # clojure-norway (21)
- # clojure-uk (3)
- # emacs (11)
- # fulcro (2)
- # graphql (6)
- # hugsql (1)
- # jobs (2)
- # leiningen (3)
- # lsp (3)
- # malli (13)
- # missionary (1)
- # off-topic (7)
- # pathom (7)
- # polylith (27)
- # reagent (14)
- # reitit (3)
- # remote-jobs (7)
- # shadow-cljs (20)
- # spacemacs (4)
- # sql (3)
- # tools-build (4)
- # xtdb (7)
Would the following keys within sx
get manipulated (as in converted to camel case?)
[list {:sx {"--List-item-radius" "8px" "--List-item-minHeight" "32px" "--List-gap" "4px"}} ...]
These properties are not showing up and I don't know how to debug it.And if that's the case (and I presume it might be), what to do so it doesn't happen?
Although I'm pretty sure that the inner map will get converted to a JS object either way, assuming you got that list
by using adapt-react-class
.
In that case, it might be that your selectors are not valid. It seems like MUI, and IIRC it has a way of setting global and/or local prefixes for selectors within components, so maybe that's why it doesn't work.
Yeah list comes from adapt-react-class
, exactly.
It is MUI (Joy UI actually, whatever, same thing).
The selectors should be valid, I copied it from their example project https://mui.com/joy-ui/getting-started/templates/order-dashboard/#some-link
Anyway thanks @U2FRKM4TW. I'll try without the selector, setting the props directly on list-item
is probably easier to understand anyway.
MUI/Joy UI is nice, but it's very bloody complex.
Yeah, with MUI reading all of the documentation is pretty much a must. I'm still using Material UI v4 and I do not look forward to having to update to v5. Or to v6, which is apparently now a thing.
Oh man, that sounds like a pain. It tends to fail silently without any explanations. I really dislike that.
Eh, in this case you're (apparently? no clue) passing data that's just something extra. In the vast majority of scenarios, any Clojure function that accepts a map of options would also simply ignore that data without complaining.
Yeah I know CLJ does that also. So far that hasn't been a problem, but in MUI I found it challenging: do I get the selector wrong? Has the key been improperly translated (kebab/camel case)? Did I forget to clj->js
? Reagent translates automatically say for {:sx {{}}
, but not for {:sx (fn [])}
. I spent a good few hours before I figured that one out, since MUI wouldn't tell me "this is not the data I expect to get".
I prefer this approach over the selectors:
+ (defn menu-button [route & chidren]
+ [list-item {:sx {:border-radius 8}}
+ [list-item-button {:on-click (close-sidebar-and-go route)}]
+ children])
Less brittle. Just putting it on list-item
(rather than a selector on list
).