Skip to content

Commit

Permalink
[docs] Add Next.js font optimization section to Pigment CSS migration (
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored Sep 7, 2024
1 parent efc1396 commit dcc1703
Showing 1 changed file with 45 additions and 6 deletions.
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

0 comments on commit dcc1703

Please sign in to comment.