From dcc17031aa37b251678c39628b15637ec758d6b4 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Sat, 7 Sep 2024 21:26:33 +0700 Subject: [PATCH] [docs] Add Next.js font optimization section to Pigment CSS migration (#43631) --- .../upgrade-to-v6/migrating-to-pigment-css.md | 51 ++++++++++++++++--- 1 file changed, 45 insertions(+), 6 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md index 236d2c81c1f576..fb2ca30d14c3fe 100644 --- a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md +++ b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md @@ -212,6 +212,45 @@ yarn dev Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS. +### Next.js font optimization + +If you are using `next/font` to optimize font loading, pass a CSS variable name to the `variable` property of the font configuration and use it in the body className: + +```diff title="app/layout.tsx" + import { Roboto } from 'next/font/google'; + + const roboto = Roboto({ + weight: ['300', '400', '500', '700'], + subsets: ['latin'], + display: 'swap', ++ variable: '--my-font-family', + }); + +export default function RootLayout(props) { + const { children } = props; + return ( + ++ + {children} + + + ); + } +``` + +Finally, update the `typography.fontFamily` value with the variable created in the previous step: + +```diff title="next.config.mjs" + const pigmentConfig = { + transformLibraries: ['@mui/material'], + theme: createTheme({ ++ typography: { ++ fontFamily: 'var(--my-font-family)', ++ }, + }), + }; +``` + ### Typescript If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`. @@ -274,7 +313,7 @@ We recommend reading the rest of the guide below to learn about the new styling Since Pigment CSS is a build-time extraction tool, it does not support owner state through callbacks. Here is an example that will throw an error at build time: ```js -const theme = extendTheme({ +const theme = createTheme({ components: { MuiCard: { styleOverrides: { @@ -307,7 +346,7 @@ If you have a dynamic color based on the theme palette, you can use the `variant ```js before -const theme = extendTheme({ +const theme = createTheme({ components: { MuiCard: { styleOverrides: { @@ -321,7 +360,7 @@ const theme = extendTheme({ ``` ```js after -const theme = extendTheme({ +const theme = createTheme({ components: { MuiCard: { styleOverrides: { @@ -352,9 +391,9 @@ Use `DefaultPropsProvider` in your main application file and move all the compon ```diff next.config|vite.config - import { extendTheme } from '@mui/material'; + import { createTheme } from '@mui/material'; - const customTheme = extendTheme({ + const customTheme = createTheme({ // ...other tokens. components: { MuiButtonBase: { @@ -639,7 +678,7 @@ Update the config file with the following code to enable right-to-left support: ```diff const pigmentConfig = { - theme: extendTheme(), + theme: createTheme(), + css: { + // Specify your default CSS authoring direction + defaultDirection: 'ltr',