Flash of unstyled content with Mantine & mismatched initial UI #2589

Activity

1. ViliamKopecky commented on Oct 20, 2024

   

   ViliamKopecky

   on Oct 20, 2024

   More actions

   I think they want you to link css files like this in loader:

   import mantineCssUrl from '@mantine/core/styles.css?url'
   
   //...
   
     links: () => [{ rel: 'stylesheet', href: mantineCssUrl }]

   As in example:

   https://github.com/TanStack/router/blob/main/examples/react/start-trellaux/app/routes/__root.tsx#L17,L39

   👍React with 👍7Reacted by Drew Dulgar, Mirus, Mark Davies, Aivars Akots, CK, George Savchenko and Syed Haque
2. drew-dulgar commented on Oct 22, 2024

   

   drew-dulgar

   on Oct 22, 2024

   More actions

   This worked for me! Thanks!
3. corydeppen commented on Oct 23, 2024

   

   corydeppen

   on Oct 23, 2024

   More actions

   @drew-dulgar I'm running into the same as mentioned in #1917. I believe the ColorSchemeScript is necessary when using SSR since it's setting the data-mantine-color-scheme attribute based on the scheme in local storage. I'm hopeful this can be resolved in Start so that scripts can be added to the head when necessary in cases like this and not duplicated in the root div.
4. davidchalifoux commented on Nov 21, 2024

   

   davidchalifoux

   on Nov 21, 2024

   More actions

   I think they want you to link css files like this in loader:

   import mantineCssUrl from '@mantine/core/styles.css?url'

   //...

   links: () => [{ rel: 'stylesheet', href: mantineCssUrl }]
   As in example:

   https://github.com/TanStack/router/blob/main/examples/react/start-trellaux/app/routes/__root.tsx#L17,L39

   I didn't realize the ?url was needed in the import, that fixed it for me. Thanks!
5. schiller-manuel commented on Mar 4, 2025

   

   schiller-manuel

   on Mar 4, 2025

   Collaborator

   More actions

   can this be closed?
6. icflorescu commented on Mar 7, 2025

   

   icflorescu

   on Mar 7, 2025

   Contributor

   More actions

   @schiller-manuel

   can this be closed?

   Yes and no... Please keep in mind that Mantine applications are usually styled with CSS modules, so issues are still going to pop up until #3023 is fixed...

   @kennyjwilli - remeber to also spread the mantineHtmlProps on the <html> tag to avoid additional hydration errors:

   import { mantineHtmlProps } from '@mantine/core';
   
   // ...
   
   <html lang="en" {...mantineHtmlProps}>
     {/* ... */}
   </html>

   👍React with 👍2Reacted by Kenny Williams and Mike Cann
7. mapsgeek commented on Apr 16, 2025

   

   mapsgeek

   on Apr 16, 2025

   Last edited by mapsgeek

   More actions

   This setup for mantine with tanstack start, colorscheme without flashing or hydration errors
   you need to setup a client side component for colorScheme toggler

   and in app.config add this to vite

   	vite: {
   		ssr: {
   			noExternal: ["@mantine/*"],
   		},
   
   

   import { DefaultCatchBoundary } from "@/components/DefaultCatchBoundary"
   import { NotFound } from "@/components/NotFound"
   import { seo } from "@/utils/seo"
   import {
   	HeadContent,
   	Outlet,
   	Scripts,
   	createRootRoute,
   } from "@tanstack/react-router"
   import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
   import * as React from "react"
   import {
   	mantineHtmlProps,
   	ColorSchemeScript,
   	MantineProvider,
   } from "@mantine/core"
   
   import appCss from "@/styles/app.css?url"
   import mantineCssUrl from "@mantine/core/styles.css?url"
   
   export const Route = createRootRoute({
   	head: () => ({
   		meta: [
   			{
   				charSet: "utf-8",
   			},
   			{
   				name: "viewport",
   				content: "width=device-width, initial-scale=1",
   			},
   			...seo({
   				title:
   					"TanStack Start | Type-Safe, Client-First, Full-Stack React Framework",
   				description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
   			}),
   		],
   		links: [
   			{ rel: "stylesheet", href: appCss },
   			{ rel: "stylesheet", href: mantineCssUrl },
   			{
   				rel: "stylesheet",
   				href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap",
   			},
   			{
   				rel: "apple-touch-icon",
   				sizes: "180x180",
   				href: "/apple-touch-icon.png",
   			},
   			{
   				rel: "icon",
   				type: "image/png",
   				sizes: "32x32",
   				href: "/favicon-32x32.png",
   			},
   			{
   				rel: "icon",
   				type: "image/png",
   				sizes: "16x16",
   				href: "/favicon-16x16.png",
   			},
   			{ rel: "manifest", href: "/site.webmanifest", color: "#fffff" },
   			{ rel: "icon", href: "/favicon.ico" },
   		],
   	}),
   	errorComponent: (props) => {
   		return (
   			<RootDocument>
   				<DefaultCatchBoundary {...props} />
   			</RootDocument>
   		)
   	},
   	notFoundComponent: () => <NotFound />,
   	component: RootComponent,
   })
   
   function RootComponent() {
   	return (
   		
   			<RootDocument>
   				<Outlet />
   			</RootDocument>
   	)
   }
   
   function RootDocument({ children }: { children: React.ReactNode }) {
   	return (
   		<html lang="en" {...mantineHtmlProps}>
   			<head>
   				<script
   					crossOrigin="anonymous"
   					src="//unpkg.com/react-scan/dist/auto.global.js"
   				/>
   				<ColorSchemeScript defaultColorScheme="dark" />
   				<HeadContent />
   			</head>
   			<body>
                                  <MantineProvider withGlobalClasses={false} defaultColorScheme="dark">
   				{children}
   	                 	</MantineProvider>
   				<TanStackRouterDevtools position="bottom-right" />
   				<Scripts />
   			</body>
   		</html>
   	)
   }
   
   

   👍React with 👍3Reacted by Jonathon Waterhouse, treilly and Patrick
8. Tsouef commented on Apr 26, 2025

   

   Tsouef

   on Apr 26, 2025

   More actions

   I have the same issue. I tried all examples but still have the FOUC.

   👍React with 👍3Reacted by wahyu, Lanz Clinton Valdez and Dmitry Makovsky
9. dperetti commented on Sep 1, 2025

   

   dperetti

   on Sep 1, 2025

   More actions

   I was in the process of moving a small project from React Router (where everything runs fine) to Tanstack and I ran into this very quickly. Show stopper! 😟
10. ElasticBottle commented on Sep 9, 2025

    

    ElasticBottle

    on Sep 9, 2025

    More actions

    believe the same issue is happening when using next themes
11. Pyakz commented on Oct 4, 2025

    

    Pyakz

    on Oct 4, 2025

    More actions

    updates on React Router (Vite) + mantine?
12. 0x0501 commented on Nov 2, 2025

    

    0x0501

    on Nov 2, 2025

    More actions

    same issue here with NextUI and next-themes.
13. Spectral-Phoenix commented on Jan 9, 2026

    

    Spectral-Phoenix

    on Jan 9, 2026

    More actions

    I am having the same issue, tried all the above fixes. nothing is working.
14. schiller-manuel commented on Jan 10, 2026

    

    schiller-manuel

    on Jan 10, 2026

    Collaborator

    More actions

    @Spectral-Phoenix which issue do you have exactly?
15. LadyBluenotes

    added the

    Bug

    issue type on Jul 11, 2026
16. LadyBluenotes

    added

    information neededFurther information is requestedFurther information is requested

    on Jul 11, 2026