Fixing Css-In-Js First Screen Styling Falshing

Optimize the common problems with ssg、ssr project.

If you are using styled-components or emotion

Do following steps

  1. Add cache
// if use @emotion/cache
// import createCache from '@emotion/cache'

import { createEmotionCache } from '@mantine/core'

export const cache = createEmotionCache({
  key: 'mantine',
  prepend: true,
})
  1. Inset cache to your Provider, here i use mantine-ui
// imagine app entry
<MantineProvider emotionCache={cache}>
</MantineProvider>

done, nice work :)