Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add Next.js font optimization section to Pigment CSS migration #43631

Merged
merged 1 commit into from
Sep 7, 2024
Merged

[docs] Add Next.js font optimization section to Pigment CSS migration #43631

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 45 additions & 6 deletions docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<html lang="en">
+ <body className={roboto.variable}>
{children}
</body>
</html>
);
}
```

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`.
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -307,7 +346,7 @@ If you have a dynamic color based on the theme palette, you can use the `variant
<codeblock>

```js before
const theme = extendTheme({
const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
Expand All @@ -321,7 +360,7 @@ const theme = extendTheme({
```

```js after
const theme = extendTheme({
const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
Expand Down Expand Up @@ -352,9 +391,9 @@ Use `DefaultPropsProvider` in your main application file and move all the compon
<codeblock>

```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: {
Expand Down Expand Up @@ -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',
Expand Down
Loading