Upon closer investigation, Mantine stepper's CSS styles are not present in server side rendered bundle:
Solution
According to the Mantine documentation, extra set-up is required for Mantine to work in Next.js properly. The set-up requires:
Install @mantine/next
Set up pages/_document.tsx and call Mantine's createGetInitialProps()
Adding <MantineProvider /> to pages_app.tsx
createGetInitialProps() in Step 2 will make sure server side rendering works properly. Since Mantine uses Emotion under the hood for styling, it's possible that omitting this step will cause the above problem
Problem
When running
yarn startafter commit 5acd6b88, the Mantine stepper is looking weird in initial rendering:https://user-images.githubusercontent.com/57580593/201523672-45daf403-7379-44bc-af32-5bf38e3d81ad.mp4
Upon closer investigation, Mantine stepper's CSS styles are not present in server side rendered bundle:
Solution
According to the Mantine documentation, extra set-up is required for Mantine to work in Next.js properly. The set-up requires:
@mantine/nextpages/_document.tsxand call Mantine'screateGetInitialProps()Adding<MantineProvider />topages_app.tsxcreateGetInitialProps()in Step 2 will make sure server side rendering works properly. Since Mantine uses Emotion under the hood for styling, it's possible that omitting this step will cause the above problem