Giters

cjohansen / portfolio

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Help with Portfonio + Mantine CSS

rafaeldelboni opened this issue · comments

commented

Hey, first of all, thanks for this tool it will help a lot and is a missing (updated) piece in the cljs ecosystem.

I'm trying to set it up to work with mantine component library, but It uses a wrapper component called MantineProvider to handle themes and CSS stuff.

And even wrapping my component with it on the defscene, it looks like is not able to do all the CSS changes it does in a normal app.

(defscene mantine-button
  ($ MantineProvider {:theme c/theme}
     ($ c/button {:text "My Button"
                  :on-click #(js/console.log "clicked!")
                  :color "blue"})))

Normal app:
image

Portfolio:
image

Other than that all components, apart from the visuals are working as they should.

I've made a sample repo to help you to see this happening:
https://github.com/rafaeldelboni/helix-jsdom-portfolio-mantine

My question is, is there a way to declare a root component to defscene run all components inside of it? Because this bug can happen in a normal app, if you add mantine css, but do not use the MantineProvider, so looks like the MantineProvider in the defscene is conflicting with some wrap portfolio may be doing.

commented

You are probably running into Portfolio's by now most famous shortcoming. Portfolio assumes that components are free of side-effects, and calls the component function in one browser window, but renders the result into an iframed document. If your component either has side-effects during the component function call, or it uses document, those will happen in the wrong document.

There is a sketch for a fix here, I'm pretty sure it will fix your problem: #16

I'm a little behind in processing that PR, but will get to it shortly.

commented

I've looked a bit into this and made it work by adding a custom canvas with forced light theme
image
The component MantineProvider seems to be adding the data theme property to the html element as a side effect, which is important to apply the correct CSS variables.
It might be easier to understand by looking at the changeset: vloth/helix-jsdom-portfolio-mantine@e403538
I'm not entirely sure how the side effects are handled by portfolio, but the css classes seems to be applied correctly. I can see the html has the class light-mode.
I hope that helps troubleshooting ?

commented

Thanks @vloth, that fixed the problem :)