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!
I just created a rough one here:
GitHub
[@mantine/docs] Add guide for using mantine with plasmo by louisgv ...
WIP, will add more details and flesh it out a bit more next week.
ref: https://discord.com/channels/946290204443025438/1059379372282368010
Feel free to add more on top of mine as you experiment with Mantine! Just added the plasmo logo and so on as well to that PR
imma head to bed now, peace! XD
BTW this is a plasmo extension created by one of mantine core maintainer: https://github.com/EmilMalanczak/linkedin-copy-paste/blob/main/src/content.tsx
GitHub
linkedin-copy-paste/content.tsx at main · EmilMalanczak/linkedin-co...
Manage your copy/paste templates on linkedin to fight with spam job offers 😎 - linkedin-copy-paste/content.tsx at main · EmilMalanczak/linkedin-copy-paste
He used a pretty old version so the
content.tsx might need some update, but the general idea is all thereoh hello there 😄 I used to contribute to mantine for a while, sadly I ran out of time for that. I had problems with setup the mantine as well, also I managed to help few folks from this dc with setup mantine. I didn't track recent changes for plasmo so you need experiment a bit I guess. However if there is a need I can create example repo for Plasmo examples with setup with mantine @louis
If yes, I would appreciate few instructions what should I cover
heyo, I sent Mantine a PR yesterday: https://github.com/mantinedev/mantine/pull/3268 I think that should cover the basic, but if you think there's more that should be added pls do :D
GitHub
[@mantine/docs] Add guide for using mantine with plasmo by louisgv ...
This PR adds a guide to integrating mantine with Plasmo, a framework to build browser extensions with React.
ref: https://discord.com/channels/946290204443025438/1059379372282368010