Fork me on GitHub
#reagent
<
2023-04-05
>
Jakub Šťastný13:04:06

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.

Jakub Šťastný13:04:38

And if that's the case (and I presume it might be), what to do so it doesn't happen?

p-himik13:04:42

Strings are preserved. I'd try adding #js in front of the inner map literal.

p-himik13:04:07

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.

Jakub Šťastný14:04:19

Yeah list comes from adapt-react-class, exactly. It is MUI (Joy UI actually, whatever, same thing).

Jakub Šťastný14:04:34

The selectors should be valid, I copied it from their example project https://mui.com/joy-ui/getting-started/templates/order-dashboard/#some-link

Jakub Šťastný14:04:26

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.

p-himik14:04:35

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.

Jakub Šťastný14:04:54

Oh man, that sounds like a pain. It tends to fail silently without any explanations. I really dislike that.

p-himik14:04:04

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.

Jakub Šťastný14:04:35

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

Jakub Šťastný14:04:47

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

👍 2
hifumi12317:04:18

v6 isnt out yet except for MUI X and the changes are quite minimal -- you now have more granular components like a dedicated clock / time picker, but otherwise most of the API has stayed the same

👍 2
hifumi12317:04:54

it probably wont be a other year or two for mui v6 since they plan to refactor @mui/material to build atop headless components in @mui/base, and tenatively planned implementation of material design v3