diff --git a/apps/pigment-css-next-app/.eslintrc b/apps/pigment-css-next-app/.eslintrc
index 327cf67d..73d03ea1 100644
--- a/apps/pigment-css-next-app/.eslintrc
+++ b/apps/pigment-css-next-app/.eslintrc
@@ -3,6 +3,7 @@
   "rules": {
     "import/prefer-default-export": "off",
     "import/extensions": "off",
-    "import/no-unresolved": "off"
-  }
+    "import/no-unresolved": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }
diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
index 70facd06..4dcc9476 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.js
@@ -101,7 +101,7 @@ theme.getColorSchemeSelector = (colorScheme) => {
  */
 const pigmentOptions = {
   theme,
-  transformLibraries: ['local-ui-lib'],
+  transformLibraries: ['local-ui-lib', '@mui/material'],
   sourceMap: true,
   displayName: true,
 };
diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx
index 0a9b3811..3bc21b10 100644
--- a/apps/pigment-css-next-app/src/app/page.tsx
+++ b/apps/pigment-css-next-app/src/app/page.tsx
@@ -1,7 +1,17 @@
 import Image from 'next/image';
 import { styled, css } from '@pigment-css/react';
+import Button from '@mui/material/Button';
 import styles from './page.module.css';
 
+declare global {
+  namespace React {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLAttributes<T> {
+      sx?: any;
+    }
+  }
+}
+
 const visuallyHidden = css({
   border: 0,
   clip: 'rect(0 0 0 0)',
@@ -93,8 +103,16 @@ export default function Home() {
   return (
     <Main>
       <div className={visuallyHidden}>I am invisible</div>
-      <Description>
-        <p>
+      <Description
+        sx={{
+          '&::before': {
+            content: '"🚀"',
+            display: 'inline-block',
+            border: '1px solid',
+          },
+        }}
+      >
+        <p sx={{ boxShadow: '0 0 4px 0 rgba(0 0 0 / 0.12)' }}>
           Get started by editing&nbsp;
           <code className={styles.code}>src/app/page.tsx</code>
         </p>
@@ -117,7 +135,12 @@ export default function Home() {
         </div>
       </Description>
 
-      <div className={styles.center}>
+      <div
+        className={styles.center}
+        sx={{
+          border: '1px solid',
+        }}
+      >
         <Image
           className={styles.logo}
           src="/next.svg"
@@ -176,6 +199,18 @@ export default function Home() {
           </h2>
           <p>Instantly deploy your Next.js site to a shareable URL with Vercel.</p>
         </a>
+        <Button
+          sx={{
+            color: 'red',
+            backgroundColor: 'blue',
+            '&:hover': {
+              color: 'blue',
+              backgroundColor: 'red',
+            },
+          }}
+        >
+          Hello
+        </Button>
       </div>
     </Main>
   );
diff --git a/apps/pigment-css-next-app/tsconfig.json b/apps/pigment-css-next-app/tsconfig.json
index 49a98502..2342c64b 100644
--- a/apps/pigment-css-next-app/tsconfig.json
+++ b/apps/pigment-css-next-app/tsconfig.json
@@ -25,15 +25,6 @@
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"],
   "references": [
-    {
-      "path": "../../packages/mui-system/tsconfig.build.json"
-    },
-    {
-      "path": "../../packages/mui-base/tsconfig.build.json"
-    },
-    {
-      "path": "../../packages/mui-material/tsconfig.build.json"
-    },
     {
       "path": "../../packages/pigment-css-react/tsconfig.json"
     }