Clojurians Log v2

styled returns a new React component. But you need it to be compatible with Reagent. Just wrap it in r/adapt-react-class. If that doesn't work (not sure if it works with function components, and no clue which one styled returns), try [:f> styled-breadcrumb ...].

Also, there's no need in that r/as-element. But you do need to adapt Breadcrumbs component as well.

I'm not super familiar with reagent, but shouldn't this just be

(defn breadcrumb-component []
  [:div {:role "presentation"}
   [:> Breadcrumbs {:aria-label "breadcrumb"}
    [:> styled-breadcrumb {:component "a"
                           :href "#"
                           :label "Home2"}]
    [:> styled-breadcrumb {:component "a"
                           :href "#"
                           :label "Catalog"}]
    [:> styled-breadcrumb {:label "Accessories"}]]])

also it is unlikely that styled understands the CLJS map you are returning. that likely needs a #js tag or clj->js

:> is just a cached sugar for r/adapt-react-class. Right, missed the CLJS map in styled.

not a tremendous contribution to this discussion, but in case you are interested, there's a Reagent wrapper for MUI: https://github.com/arttuka/reagent-material-ui

It's for MUI 5, and now there's MUI 6. No clue which one the OP uses though. I myself got quite a bit tired from their "this update changes every single thing" approach, so I don't use MUI anymore.

yeah, I've just used it once. There seems to be quite a lot of churn in the library. Also, wrt that code snippet above, is it even legal syntax to call r/as-element with square brackets? bc if so, TIL

I've never seen such syntax being mentioned anywhere before, and I'd be surprised if that worked, and worked reliably.

I try all this but without success, so I'm trying something simpler, like:

(def my-component
  (clj->js
   (styled "div"
           {:color "darkslategray"
            :backgroundColor "aliceblue"
            :padding 8
            :borderRadius 4})))

(defn basic-usage []
  [my-component "Hello"])

that clj->js should be for the map, not the styled call

and it should still be [:> my-component ...]

true, let me try

and it is also relevant in what context the basic-usage is used there

now I see: Error: Objects are not valid as a React child (found: object with keys {$$typeof, render, defaultProps, emotion_real, emotion_base, emotion_styles, emotion_forwardProp, withComponent}). If you meant to render a collection of children, use an array instead.

What is your current code?

(def my-component
  (styled "div"
          (clj->js
           {:color "darkslategray"
            :backgroundColor "aliceblue"
            :padding 8
            :borderRadius 4}))
)

(defn basic-usage []
  [:> my-component "Hello"])

and just call like [basic-usage]

in what context is this [basic-usage]? 😛 I'm asking because if its in some JS context that is not aware of what hiccup or reagent is then that is the cause problem 😛

context is direct on the router component from init :

(rd/render [router-component]
             (.getElementById js/document "app"))

(defn router-component []
  [basic-usage])

ok thats fine

I'm rusty on MUI but I think you may need to wrap child components in r/as-element, even when their parents have been adapted

@wudafumeya Try :f> instead of :> there.

https://github.com/bhlieberman/nouvelles-impressions-a-fric/blob/ed271d980cad796474e3f4d7559f08901a76bb5c/src/main/nia/views/navbar.cljs#L88

Here's an example of using styled components in this manner, albeit using the reagent-mui wrapper

@bhlieberman93 That's for higher-order components, no the case here.

@p-himik with :f> same thing

I'd try to figure out what that object in the exception is exactly. You can do so by making the DevTools debugger break on uncaught exceptions. If that doesn't break before the exception happens, it must be a caught one - so break on caught exceptions and skip any that don't seem relevant.

Yep, trying it . thanks all!

I tried

(.. js/document -body -classList add "foo") .. any clues what I did wrong?

(.. js/document -body -classList (add "foo"))

native method invocation is performed with .theMethod and native property access with .-theProperty so when you use .. you can access the properties without wrapping parens but methods still need to be invoked like functions

Weird, REPL says its not a function

but I’m pretty sure it is https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add

(js/document.body.classList.add foo) should work

Technically this is not valid Clojure form but it works in cljs

Ah understood

weird, it also says its not a fn.. let me see whats going on

yeah something else sounds wrong then, afaik both are valid

As another option, that I personally prefer: (-> js/document .-body .-classList (.add "foo")).

That syntax works!

Ehm, that's weird. If that works, .. also should've worked. What REPL and environment are you using?

Cursive / Shadow-cljs repl

I think it’s n-repl?

And what is the exact error when you try (.. js/document -body -classList (add "foo"))?

(.. js/document -body -classList (add “dark”)) Execution error (TypeError) at (<cljs repl>:1). document.body.classList.add is not a function

I use that syntax again just now and it works.. I must have gotten my browser into a weird state

Yeah, that's quite easy to mess up. :)

cljs.user=> (set! (.-add js/document.body.classList) nil)
nil
cljs.user=> (.. js/document -body -classList (add "foo"))
ERROR - document.body.classList.add is not a function