🧩 Plasmo Developers•2y ago

Mantine modals not rendering + styles are broken

I'm using a modal with https://mantine.dev/ but it's not rendering on the screen. When I inspect the modal, I'm only then able to see it on the bottom of the page and the mantine styles are not being applied to it

AppShell demo

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

18 Replies

Arcane•2y ago

@MoreThanYourAverageJoe has reached level 4. GG!

lab•2y ago

I think there'sa gotcha with Mantine modal - you must tell it where to mount its container otherwise, it will by default mount on top of the document.body

MoreThanYourAverageJoe#3911OP•2y ago

would I have to mount it to a container than override it's position and z-index to make it overlay over the center of the screen? that doesn't explain the styles not applying though

MoreThanYourAverageJoe#3911OP•2y ago

lab•2y ago

is that mantine DOM element being injected into the body? if so, that's why. The style are injected into the shadowDOM that houses the CSUI component

MoreThanYourAverageJoe#3911OP•2y ago

yes

lab•2y ago

yeah, it's in the body right

MoreThanYourAverageJoe#3911OP•2y ago

yeh

lab•2y ago

not inside plasmo-csui

MoreThanYourAverageJoe#3911OP•2y ago

lab•2y ago

yup, so you will just need to tell the Modal container to target the right component to mount onto you can even use an useRef as well

MoreThanYourAverageJoe#3911OP•2y ago

is there somewhere in the docs talkign about injecting into plasmo-csui using shadow element hmmm let me look into that actually that would be bette

lab•2y ago

check out the docs on CSUI but you shouldn't need to worry about it at all use VDOM leverage the react abstractions

MoreThanYourAverageJoe#3911OP•2y ago

you're referring to getOverlayAnchor from the docs right? i'm kind of a noob, I'm not sure how I'd even access elements using useRef that aren't in my .tsx file

lab•2y ago

no, you can actually reference a stray element inside your component itself no anchor needed i.e put a span inside your component and add an useRef into your component then, reference it in the container

MoreThanYourAverageJoe#3911OP•2y ago

is there any examples I can look at? I think I'm just too tired it's late here

lab•2y ago

lol get some sleep it's 3AM on my end too xd but the idea is this:

const mountRef = useRef()

return (
<div ref={mountRef}>
<Modal parent={mountRef} />
</div>
)

const mountRef = useRef()

return (
<div ref={mountRef}>
<Modal parent={mountRef} />
</div>
)

and there's no example on this exact cases

lab•2y ago

@MoreThanYourAverageJoe use the target props: https://mantine.dev/core/modal/?t=props

Modal

Modal with optional header

Gaming

Programming

Mantine modals not rendering + styles are broken