diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-bottom-navigation/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-bottom-navigation/page.tsx
new file mode 100644
index 00000000000000..835bfff7a9c407
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-bottom-navigation/page.tsx
@@ -0,0 +1,30 @@
+'use client';
+import * as React from 'react';
+import FixedBottomNavigation from '../../../../../../docs/data/material/components/bottom-navigation/FixedBottomNavigation';
+import LabelBottomNavigation from '../../../../../../docs/data/material/components/bottom-navigation/LabelBottomNavigation';
+import SimpleBottomNavigation from '../../../../../../docs/data/material/components/bottom-navigation/SimpleBottomNavigation';
+
+export default function BottomNavigation() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Fixed Bottom Navigation</h2>
+        <div className="demo-container">
+          <FixedBottomNavigation />
+        </div>
+      </section>
+      <section>
+        <h2> Label Bottom Navigation</h2>
+        <div className="demo-container">
+          <LabelBottomNavigation />
+        </div>
+      </section>
+      <section>
+        <h2> Simple Bottom Navigation</h2>
+        <div className="demo-container">
+          <SimpleBottomNavigation />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.js b/packages/mui-material/src/BottomNavigation/BottomNavigation.js
index 86eb69a517aec6..0d6ce8ed1f964e 100755
--- a/packages/mui-material/src/BottomNavigation/BottomNavigation.js
+++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.js
@@ -4,10 +4,11 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
 
+const useThemeProps = createUseThemeProps('MuiBottomNavigation');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js
index caedc7018e73b3..e583152be06596 100644
--- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js
+++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js
@@ -3,14 +3,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, {
   getBottomNavigationActionUtilityClass,
 } from './bottomNavigationActionClasses';
 
+const useThemeProps = createUseThemeProps('MuiBottomNavigationAction');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, showLabel, selected } = ownerState;
 
@@ -30,7 +31,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
 
     return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   transition: theme.transitions.create(['color', 'padding-top'], {
     duration: theme.transitions.duration.short,
   }),
@@ -40,38 +41,47 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
   flex: '1',
-  ...(!ownerState.showLabel &&
-    !ownerState.selected && {
-      paddingTop: 14,
-    }),
-  ...(!ownerState.showLabel &&
-    !ownerState.selected &&
-    !ownerState.label && {
-      paddingTop: 0,
-    }),
   [`&.${bottomNavigationActionClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.main,
   },
+  variants: [
+    {
+      props: ({ showLabel, selected }) => !showLabel && !selected,
+      style: {
+        paddingTop: 14,
+      },
+    },
+    {
+      props: ({ showLabel, selected, label }) => !showLabel && !selected && !label,
+      style: {
+        paddingTop: 0,
+      },
+    },
+  ],
 }));
 
 const BottomNavigationActionLabel = styled('span', {
   name: 'MuiBottomNavigationAction',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label,
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   fontFamily: theme.typography.fontFamily,
   fontSize: theme.typography.pxToRem(12),
   opacity: 1,
   transition: 'font-size 0.2s, opacity 0.2s',
   transitionDelay: '0.1s',
-  ...(!ownerState.showLabel &&
-    !ownerState.selected && {
-      opacity: 0,
-      transitionDelay: '0s',
-    }),
   [`&.${bottomNavigationActionClasses.selected}`]: {
     fontSize: theme.typography.pxToRem(14),
   },
+  variants: [
+    {
+      props: ({ showLabel, selected }) => !showLabel && !selected,
+      style: {
+        opacity: 0,
+        transitionDelay: '0s',
+      },
+    },
+  ],
 }));
 
 const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(inProps, ref) {
diff --git a/scripts/pigmentcss-render-mui-demos.mjs b/scripts/pigmentcss-render-mui-demos.mjs
index c099bbcc52dfd9..0a982601803a37 100644
--- a/scripts/pigmentcss-render-mui-demos.mjs
+++ b/scripts/pigmentcss-render-mui-demos.mjs
@@ -10,11 +10,18 @@ function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+function toPascalCase(string) {
+  if (typeof string !== 'string') {
+    throw new Error('`toPascalCase(string)` expects a string argument.');
+  }
+
+  return capitalize(string).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
 function titleCase(str) {
   const result = str.replace(/([A-Z])/g, ' $1');
   return result.charAt(0).toUpperCase() + result.slice(1);
 }
-
 const args = process.argv.slice(2);
 
 async function run() {
@@ -57,11 +64,14 @@ async function run() {
     const componentName = filename.replace('.tsx', '');
     return `import ${componentName} from '../../../../../../docs/data/material/components/${dataFolderName}/${componentName}';`;
   });
+
+  const functionName = toPascalCase(dataFolderName);
+
   const nextFileContent = `'use client';
 import * as React from 'react';
 ${nextImports.join('\n')}
 
-export default function ${capitalize(dataFolderName)}() {
+export default function ${functionName}() {
   return (
     <React.Fragment>
 ${renders.join('\n')}
@@ -93,7 +103,7 @@ ${renders.join('\n')}
 import MaterialUILayout from '../../Layout';
 ${viteImports.join('\n')}
 
-export default function ${capitalize(dataFolderName)}() {
+export default function ${functionName}() {
   return (
     <MaterialUILayout>
       <h1>${capitalize(dataFolderName)}</h1>