Using Plasmo with Mantine
I was able to successfully use https://mantine.dev/ for all my react components in the google extension popup, but I'm not able to get it to properly render the components in the injected react components
AppShell demo
React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience
22 Replies
Ooh we have the core maintainer of mantine on the server, and some other who were able to use it in their extension as well
We should add an example for it lol
But basically, you will need to extract the style from mantine and inject it into the CSUI via the getStyle function
Since mantine uses emotion, follow this setup: https://github.com/PlasmoHQ/examples/tree/main/with-emotion
GitHub
examples/with-emotion at main · PlasmoHQ/examples
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - examples/with-emotion at main · PlasmoHQ/examples
Or make an easy to use guide for it, or maybe send a PR to mantine UI with an example on how to use mantine with Plasmo
since it's a pretty sizable dependency ;d
how're you able to extract the styles from mantine?
@MoreThanYourAverageJoe has reached level 3. GG!
Apply the Emotion example with this: https://github.com/mantinedev/mantine/blob/master/docs/src/docs/theming/emotion-cache.mdx#configure-emotion
GitHub
mantine/emotion-cache.mdx at master · mantinedev/mantine
React components library with native dark theme support - mantine/emotion-cache.mdx at master · mantinedev/mantine
BTW, it would be really nice to add a plasmo guide to mantine in here: https://github.com/mantinedev/mantine/blob/master/docs/src/docs/guides/typescript.mdx
GitHub
mantine/typescript.mdx at master · mantinedev/mantine
React components library with native dark theme support - mantine/typescript.mdx at master · mantinedev/mantine
a
/guides/plasmo.tsxi'll come around to doing that within the next couple of days
i'm still trying to figure this out
still kind of confused as how to fully use the getStyle function, would I have to inject the css for every single component?
what about for components like: https://mantine.dev/core/multi-select/
MultiSelect
Custom searchable multi select
I'd have to inject he css for. them all?
no, you only need to return the style from the emotionCache
see contents.tsx for the base idea:
GitHub
examples/content.tsx at main · PlasmoHQ/examples
🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - examples/content.tsx at main · PlasmoHQ/examples
mantine/emotion will generate the runtime style and send them to that custom cache, which in turn get rendered into the style tag by the getStyle function in CSUI
which in turn, get mounted onto the ShadowDOM for you by plasmo
gotchu
okay i get it
I'll create a quick guide within the next few days and submit a PR to mantine
thank you!