Add pigment-css to nextjs using manual installation docs

[kdichev]

these are the steps I did using the manual installation docs from mui documentation:

Step 1:

npm install @pigment-css/react
npm install --save-dev @pigment-css/nextjs-plugin

Step 2:

// next.config.js
import { withPigment } from '@pigment-css/nextjs-plugin';

export default withPigment({ nextConfig });

Step 3:

// src/app/layout.tsx
import '@pigment-css/react/styles.css';

Step 4:

import { withPigment } from "@pigment-css/nextjs-plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withPigment(nextConfig, {
  theme: {
    colors: {
      primary: "tomato",
      secondary: "cyan",
    },
    spacing: {
      unit: 8,
    },
    typography: {
      fontFamily: "sans-serif",
    },
  },
});

[kdichev]

Key takeaways from initial 4 steps:

1. when importing from @mui/material for example a Button the theme is not applied
2. when creating Header with styled the theme is applied

import { styled } from "@pigment-css/react";

const Heading = styled("h1")(({ theme }) => ({
  color: theme.colors.primary,
  fontSize: theme.spacing.unit * 4,
  fontFamily: theme.typography.fontFamily,
}));

3. sx prop does not work at all on imported components from @mui/material neither theme aware properties, nor css style properties
4. sx prop theme aware properties does not work on component created with styled, nor it works on html elements

 <Heading
    sx={{
      marginTop: 1, // outputs margin-top: 1px
      mt: 1, // out puts mt: 1 and hence is not working
    }}
  >
    Heading
</Heading>

5. There is an misstake in the documentation second step

// next.config.js
import { withPigment } from '@pigment-css/nextjs-plugin';

export default withPigment({ nextConfig }); 

// should be 
export default withPigment(nextConfig);