-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ScrollArea isn't visible on a Remix app in production mode #3548
Comments
Mantine is using Emotion underneath which is a CSS-in-JS library. Most of the React meta frameworks like Remix/NextJS including React 18's Server Component are moving towards SSR with response body streaming to achieve this effect. As streaming response body would mean whatever gets to the browser first will render first (even without JS kicked in), solutions like CSS in JS heavily relies on runtime rendering (i.e. the browser would only know how to render the CSS styling AFTER JS kicks in) are gonna be facing lots of challenges. This kind of problem is only solvable if Emotion comes up with solution to:
Step 1 can be pretty expensive as we'd need to get all CSS styling combinations and would likely cause higher latency to the page load. In short, this isn't an easy problem to resolve and from what I can tell, any UI libraries that use CSS-in-JS aren't really good fit to use with the modern meta frameworks. This is also why now ppl are leaning towards either using pure CSS or utility first (e.g. tailwindcss) when it comes to working well with these meta frameworks that utilise body response streaming approach.
All in all, I still love and appreciate all the works done in Mantine, but just ensure that you have enough time and resources to come up with workarounds(which some include ugly CSS style hardcoding) if you're to use Mantine with the modern meta frameworks that use SSR streaming. |
For the current issue, this could be the workaround. As for the possible root cause, this is my hypothesis. Let us know if it works. |
I confirm that your workaround works for me. That will do for now! As for the CSS-in-JS and React streaming issue, I'm following it with interest, although I think everyone more or less agrees that we won't find a way to make both work for a while 😅 Thank you for your help! |
This issue is closed for one of these reasons:
If you think that this issue was closed by mistake, and it is still an issue in version 7.0, please reopen it. |
It's magnificent. Congratulations on converting the project to CSS! |
What package has an issue
@mantine/core
Describe the bug
When using the ScrollArea component exported by @mantine/core with Remix in dev mode, everything works as it should.
But when we build Remix, and start it in production mode, the scrollbar of the ScrollArea is not visible anymore.
I put in the repro project an example using @radix-ui/react-scroll-area directly, and it seems to work. I conclude that this is not a problem with @radix-ui/react-scroll-area, but rather a problem with the way @mantine/core operates the component.
I didn't put a link to a codeandbox, but directly to a project on Github that reproduces the bug. (I had a hard time setting up Remix with Codesandbox, so I gave up 😅)
What version of @mantine/hooks page do you have in package.json?
5.10.3
If possible, please include a link to a codesandbox with the reproduced problem
https://github.com/Thanaen/mantine-remix-scrollbar
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
I don't have much experience using @radix-ui, so I'd probably have a hard time helping you fix the problem!
But I don't refuse on principle.
Possible fix
No response
The text was updated successfully, but these errors were encountered: