That's CSS which does not exist in ClojureScript by itself. It all depends on what exactly you're using for CSS-in-CLJS, if anything.

Ok I got it.. thnx

(let [^js color-scheme-obj (useMangineColorScheme)
      toggle-color-scheme (.-toggleColorScheme color-scheme-obj)]
  [:> ActionIcon {:variant  "default"
                  :on-click (fn []
                              (toggle-color-scheme))}
    ...])

ty I will try!

Should the let binding toggle-color-scheme (.-toggleColorScheme color-scheme-obj) have an octothorpe to make it a function? toggle-color-scheme #(.-toggleColorScheme color-scheme-obj), @U2FRKM4TW?

Why? The JS code doesn't do it. It's a function that's already assigned to a field.

I'd be curious to know what you struggled with here exactly (see my response to your previous message and how it's just JS interop along with some Reagent-specific thing, namely :>).

it was just a rant ;), can you point me to some material to better understand how to interpolate and build a react app in clojurescript application?

Sorry, I don't keep track of such materials. But some primers on CLJS<->JS interop, without any React, are easy to find and are very useful.

Also, you need to unpack what's going on in JS before writing it in CLJS - at least, before you get fully comfortable with interop. E.g. here

const { colorScheme, toggleColorScheme } = useMantineColorScheme();

react-dom.development.js:14907 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons

(require '["@mantine/core" :as mantine.core])

[:> mantine.core/ActionIcon {:variant "default"
                    :size 30
                    :on-click (fn [x]
                                (let [^js color-scheme-obj (mantine.core/useMantineColorScheme)
                                      toggle-color-scheme (.-toggleColorScheme color-scheme-obj)]
                                  [:> action-icon {:variant  "default"
                                                   :on-click (fn []
                                                               (toggle-color-scheme))}]))}]

@U2FRKM4TW I did as you show me, but now Im facing some hook error ^

Have you tried looking that error up online?

yes, I tried place inside [:f>

and r/as-element

Why did you put the hook inside the on-click handler? IIRC the JS version didn't do it.

I just simplify to this

`

(let [^js x (mantine.core/useMantineColorScheme)
      x1 (.-toggleColorScheme x)]
  (js/console.log x)
  (js/console.log x1))

Hooks are special. You can't just use them as you please, even if it makes the code appear simpler. You have to use them in a way they are designed to be used.

I only need from const { colorScheme, toggleColorScheme } = useMantineColorScheme(); the toggleColorScheme function, but seans that the toogleColorSchema is a hook so I can`t use it or even access it

but in the original code, the toggleColorScheme is used inside on-click

https://github.com/mantinedev/mantine/blob/master/src/mantine-demos/src/demos/core/AppShell/AppShell.demo.usage.tsx

toogleColorScheme is probably a plain function. But useMantineColorScheme is probably a hook.

for sure it is

Well, as you can see in the code at that link, Demo is a function component and that hook is used right at its start. You just gotta replicate that.