From 8b7e907a95b3f335da4e494356bd3c9a0651ec98 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Jun 2024 12:23:34 +0700 Subject: [PATCH] run prettier --- docs/data/joy/customization/dark-mode/dark-mode.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/data/joy/customization/dark-mode/dark-mode.md b/docs/data/joy/customization/dark-mode/dark-mode.md index 3f5857b24fd304..65af8c390e5f89 100644 --- a/docs/data/joy/customization/dark-mode/dark-mode.md +++ b/docs/data/joy/customization/dark-mode/dark-mode.md @@ -152,19 +152,20 @@ export default class MyDocument extends Document { To use the Joy UI API with a Next.js project with the App Router, create a separate [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) to utilize the [`getInitColorSchemeScript`](https://mui.com/joy-ui/main-features/dark-mode-optimization/#the-solution-css-variables) function: ```jsx title="colorInit.js" -"use client"; +'use client'; -import { getInitColorSchemeScript } from "@mui/joy/styles"; +import { getInitColorSchemeScript } from '@mui/joy/styles'; export default function ColorInit() { return <>{getInitColorSchemeScript()}; } ``` + Now, you can use the it in your [`app/layout.js`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts) file in order to prevent flickering: ```jsx title="layout.js" -import ColorInit from "./colorInit"; -import { CssBaseline, CssVarsProvider } from "@mui/joy"; +import ColorInit from './colorInit'; +import { CssBaseline, CssVarsProvider } from '@mui/joy'; export default function RootLayout({ children }) { return (