diff --git a/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts b/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts
index 72118bcdac3cc5..e1b1034503222d 100644
--- a/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts
+++ b/packages/mui-joy/src/AspectRatio/aspectRatioClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface AspectRatioClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Avatar/avatarClasses.ts b/packages/mui-joy/src/Avatar/avatarClasses.ts
index d4ce28452fb641..4d42d4c9d2d8ea 100644
--- a/packages/mui-joy/src/Avatar/avatarClasses.ts
+++ b/packages/mui-joy/src/Avatar/avatarClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface AvatarClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts b/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts
index bd724ea5924659..3ac0acdd62d454 100644
--- a/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts
+++ b/packages/mui-joy/src/AvatarGroup/avatarGroupClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface AvatarGroupClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Badge/badgeClasses.ts b/packages/mui-joy/src/Badge/badgeClasses.ts
index 6dc62ce22a71ae..aba4663a19aba5 100644
--- a/packages/mui-joy/src/Badge/badgeClasses.ts
+++ b/packages/mui-joy/src/Badge/badgeClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface BadgeClasses {
   /** Class name applied to the root element. */
diff --git a/packages/mui-joy/src/Button/buttonClasses.ts b/packages/mui-joy/src/Button/buttonClasses.ts
index 5ef5369398782b..6f72ab08ef4961 100644
--- a/packages/mui-joy/src/Button/buttonClasses.ts
+++ b/packages/mui-joy/src/Button/buttonClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ButtonClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Card/cardClasses.ts b/packages/mui-joy/src/Card/cardClasses.ts
index 85daa83d8e466d..687062fdf18d50 100644
--- a/packages/mui-joy/src/Card/cardClasses.ts
+++ b/packages/mui-joy/src/Card/cardClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface CardClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/CardContent/cardContentClasses.ts b/packages/mui-joy/src/CardContent/cardContentClasses.ts
index 467c0cb3c648bd..0cda1a38dd9bd9 100644
--- a/packages/mui-joy/src/CardContent/cardContentClasses.ts
+++ b/packages/mui-joy/src/CardContent/cardContentClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface CardContentClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/CardCover/cardCoverClasses.ts b/packages/mui-joy/src/CardCover/cardCoverClasses.ts
index 391abcadc19e3c..382f467d22b39b 100644
--- a/packages/mui-joy/src/CardCover/cardCoverClasses.ts
+++ b/packages/mui-joy/src/CardCover/cardCoverClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface CardCoverClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts b/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts
index 173a0cae896add..dd445e4e83e4d2 100644
--- a/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts
+++ b/packages/mui-joy/src/CardOverflow/cardOverflowClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface CardOverflowClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index 80291ec996682d..fd134f48ee9d49 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -59,12 +59,12 @@ const CheckboxRoot = styled('span', {
   display: 'inline-flex',
   fontFamily: theme.vars.fontFamily.body,
   lineHeight: 'var(--Checkbox-size)', // prevent label from having larger height than the checkbox
-  '&.Mui-disabled': {
+  [`&.${checkboxClasses.disabled}`]: {
     color: theme.vars.palette[ownerState.color!]?.plainDisabledColor,
   },
   ...(ownerState.disableIcon && {
     color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
-    '&.Mui-disabled': {
+    [`&.${checkboxClasses.disabled}`]: {
       color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}DisabledColor`],
     },
   }),
diff --git a/packages/mui-joy/src/Checkbox/checkboxClasses.ts b/packages/mui-joy/src/Checkbox/checkboxClasses.ts
index 30a940f8bcf900..7e33cdfe4a1137 100644
--- a/packages/mui-joy/src/Checkbox/checkboxClasses.ts
+++ b/packages/mui-joy/src/Checkbox/checkboxClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface CheckboxClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Chip/chipClasses.ts b/packages/mui-joy/src/Chip/chipClasses.ts
index 4619b7ffa4c3de..ef79e47e44af79 100644
--- a/packages/mui-joy/src/Chip/chipClasses.ts
+++ b/packages/mui-joy/src/Chip/chipClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ChipClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts b/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts
index fce130dbc7652b..6b44ed513cc84e 100644
--- a/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts
+++ b/packages/mui-joy/src/ChipDelete/chipDeleteClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ChipDeleteClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Container/containerClasses.ts b/packages/mui-joy/src/Container/containerClasses.ts
index df3cff6f60208a..cc6ae505c27b0f 100644
--- a/packages/mui-joy/src/Container/containerClasses.ts
+++ b/packages/mui-joy/src/Container/containerClasses.ts
@@ -1,5 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import { ContainerClasses } from '@mui/system';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export type { ContainerClassKey } from '@mui/system';
 export type { ContainerClasses };
diff --git a/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts b/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts
index bd61b0ae42fd1c..c9a2e633615d08 100644
--- a/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts
+++ b/packages/mui-joy/src/FormHelperText/formHelperTextClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface FormHelperTextClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/FormLabel/formLabelClasses.ts b/packages/mui-joy/src/FormLabel/formLabelClasses.ts
index 1b5a13c5cfe680..b2624a7ef4c39a 100644
--- a/packages/mui-joy/src/FormLabel/formLabelClasses.ts
+++ b/packages/mui-joy/src/FormLabel/formLabelClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface FormLabelClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/IconButton/iconButtonClasses.ts b/packages/mui-joy/src/IconButton/iconButtonClasses.ts
index 72722ead0e3191..2d89f71fc67376 100644
--- a/packages/mui-joy/src/IconButton/iconButtonClasses.ts
+++ b/packages/mui-joy/src/IconButton/iconButtonClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface IconButtonClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Input/inputClasses.ts b/packages/mui-joy/src/Input/inputClasses.ts
index 1e378534359e7d..6f853d154ba8ee 100644
--- a/packages/mui-joy/src/Input/inputClasses.ts
+++ b/packages/mui-joy/src/Input/inputClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface InputClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 3dd57cf0cf1fbf..30e88ba4003d15 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -103,7 +103,7 @@ const LinkRoot = styled('a', {
         : {
             color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 1)`,
             cursor: 'pointer',
-            '&.Mui-disabled': {
+            [`&.${linkClasses.disabled}`]: {
               pointerEvents: 'none',
               color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 0.6)`,
             },
diff --git a/packages/mui-joy/src/Link/linkClasses.ts b/packages/mui-joy/src/Link/linkClasses.ts
index ec49fc9537c79a..0fa388bdc91d78 100644
--- a/packages/mui-joy/src/Link/linkClasses.ts
+++ b/packages/mui-joy/src/Link/linkClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface LinkClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/List/listClasses.ts b/packages/mui-joy/src/List/listClasses.ts
index bbcf666f3a341f..399e317311e005 100644
--- a/packages/mui-joy/src/List/listClasses.ts
+++ b/packages/mui-joy/src/List/listClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ListClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListDivider/listDividerClasses.ts b/packages/mui-joy/src/ListDivider/listDividerClasses.ts
index cbec7d500527c6..7ed0ad0b202fd6 100644
--- a/packages/mui-joy/src/ListDivider/listDividerClasses.ts
+++ b/packages/mui-joy/src/ListDivider/listDividerClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ListDividerClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItem/listItemClasses.ts b/packages/mui-joy/src/ListItem/listItemClasses.ts
index 9e338b56a97ba9..77abb6ac6892b7 100644
--- a/packages/mui-joy/src/ListItem/listItemClasses.ts
+++ b/packages/mui-joy/src/ListItem/listItemClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ListItemClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts b/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts
index d870153e5e1860..639cf7a5b1ce5a 100644
--- a/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts
+++ b/packages/mui-joy/src/ListItemButton/listItemButtonClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ListItemButtonClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts b/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts
index 8788b63ba39f78..02ce494988f50f 100644
--- a/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts
+++ b/packages/mui-joy/src/ListItemContent/listItemContentClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ListItemContentClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts b/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts
index 41e15419519f66..3a06f107e9c91c 100644
--- a/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts
+++ b/packages/mui-joy/src/ListItemDecorator/listItemDecoratorClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface ListItemDecoratorClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index dbdfc44d1c0634..055c6a34f5c9a3 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -71,12 +71,12 @@ const RadioRoot = styled('span', {
       minWidth: 0,
       fontFamily: theme.vars.fontFamily.body,
       lineHeight: 'var(--Radio-size)', // prevent label from having larger height than the checkbox
-      '&.Mui-disabled': {
+      [`&.${radioClasses.disabled}`]: {
         color: theme.vars.palette[ownerState.color!]?.plainDisabledColor,
       },
       ...(ownerState.disableIcon && {
         color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
-        '&.Mui-disabled': {
+        [`&.${radioClasses.disabled}`]: {
           color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}DisabledColor`],
         },
       }),
diff --git a/packages/mui-joy/src/Radio/radioClasses.ts b/packages/mui-joy/src/Radio/radioClasses.ts
index fe7ca089d90bae..6e26201525ea6a 100644
--- a/packages/mui-joy/src/Radio/radioClasses.ts
+++ b/packages/mui-joy/src/Radio/radioClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface RadioClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts b/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts
index d490e4a587493c..55c9494c11f7be 100644
--- a/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts
+++ b/packages/mui-joy/src/RadioGroup/radioGroupClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface RadioGroupClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Sheet/sheetClasses.ts b/packages/mui-joy/src/Sheet/sheetClasses.ts
index a4f7d8cb2839f6..8618b303dd4e29 100644
--- a/packages/mui-joy/src/Sheet/sheetClasses.ts
+++ b/packages/mui-joy/src/Sheet/sheetClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface SheetClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 898e08cceb71f2..7833cc462133c0 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -604,7 +604,10 @@ Slider.propTypes /* remove-proptypes */ = {
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'
    */
-  color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
+    PropTypes.string,
+  ]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -735,7 +738,10 @@ Slider.propTypes /* remove-proptypes */ = {
    * It accepts theme values between 'sm' and 'lg'.
    * @default 'md'
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['sm', 'md', 'lg']),
+    PropTypes.string,
+  ]),
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
    * The `min` prop serves as the origin for the valid values.
diff --git a/packages/mui-joy/src/Slider/sliderClasses.ts b/packages/mui-joy/src/Slider/sliderClasses.ts
index 8ab9451a2a23f1..8270536f911901 100644
--- a/packages/mui-joy/src/Slider/sliderClasses.ts
+++ b/packages/mui-joy/src/Slider/sliderClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface SliderClasses {
   /** Class name applied to the root element. */
diff --git a/packages/mui-joy/src/SvgIcon/svgIconClasses.ts b/packages/mui-joy/src/SvgIcon/svgIconClasses.ts
index 903da31cc73940..69a3ac7895e944 100644
--- a/packages/mui-joy/src/SvgIcon/svgIconClasses.ts
+++ b/packages/mui-joy/src/SvgIcon/svgIconClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface SvgIconClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Switch/switchClasses.ts b/packages/mui-joy/src/Switch/switchClasses.ts
index ddf8a57f112596..3593ae58fa310c 100644
--- a/packages/mui-joy/src/Switch/switchClasses.ts
+++ b/packages/mui-joy/src/Switch/switchClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface SwitchClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/TextField/textFieldClasses.ts b/packages/mui-joy/src/TextField/textFieldClasses.ts
index 2d07bb289a5136..018c4fe5aaca91 100644
--- a/packages/mui-joy/src/TextField/textFieldClasses.ts
+++ b/packages/mui-joy/src/TextField/textFieldClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface TextFieldClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/Typography/typographyClasses.ts b/packages/mui-joy/src/Typography/typographyClasses.ts
index e007d51c4d8e8e..57edadf5315222 100644
--- a/packages/mui-joy/src/Typography/typographyClasses.ts
+++ b/packages/mui-joy/src/Typography/typographyClasses.ts
@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
 
 export interface TypographyClasses {
   /** Styles applied to the root element. */
diff --git a/packages/mui-joy/src/className/index.ts b/packages/mui-joy/src/className/index.ts
index ac4bb27c3b0d48..1d47a7d752fa78 100644
--- a/packages/mui-joy/src/className/index.ts
+++ b/packages/mui-joy/src/className/index.ts
@@ -1,10 +1,9 @@
-/**
- * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
- * ❌ import { ... } from '@mui/base';
- * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
- *
- * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
- */
+import { unstable_generateUtilityClass, unstable_generateUtilityClasses } from '@mui/utils';
 
-// eslint-disable-next-line import/prefer-default-export
-export { unstable_ClassNameGenerator } from '@mui/base/className';
+export { unstable_ClassNameGenerator } from '@mui/utils';
+
+export const generateUtilityClass = (componentName: string, slot: string) =>
+  unstable_generateUtilityClass(componentName, slot, 'Joy');
+
+export const generateUtilityClasses = <T extends string>(componentName: string, slots: Array<T>) =>
+  unstable_generateUtilityClasses(componentName, slots, 'Joy');
diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
index 0617111bf1c49a..b0f48cc833e474 100644
--- a/packages/mui-joy/src/styles/extendTheme.ts
+++ b/packages/mui-joy/src/styles/extendTheme.ts
@@ -16,6 +16,7 @@ import { TypographySystem, FontSize } from './types/typography';
 import { Variants } from './types/variants';
 import { Theme, ThemeCSSVar, ThemeScales } from './types';
 import { Components } from './components';
+import { generateUtilityClass } from '../className';
 
 type CSSProperties = CSS.Properties<number | string>;
 
@@ -360,7 +361,7 @@ export default function extendTheme(themeInput?: ThemeInput): Theme {
       xl3: 900,
     },
     focus: {
-      selector: '&.Mui-focusVisible, &:focus-visible',
+      selector: `&.${generateUtilityClass('', 'focusVisible')}, &:focus-visible`,
       default: {
         outlineOffset: 'var(--joy-focus-outlineOffset, 0px)', // reset user agent stylesheet
         outline: '4px solid var(--joy-palette-focusVisible)',
diff --git a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts
index ec4a28cb0b510b..acf655563d8925 100644
--- a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts
+++ b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.test.ts
@@ -48,4 +48,8 @@ describe('generateUtilityClass', () => {
       expect(generateUtilityClass('MuiTest', 'selected')).to.equal('Mui-selected');
     });
   });
+
+  it('custom state prefix', () => {
+    expect(generateUtilityClass('JoyButton', 'focusVisible', 'Joy')).to.equal('Joy-focusVisible');
+  });
 });
diff --git a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts
index 711436453acfe3..4d5def219b690c 100644
--- a/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts
+++ b/packages/mui-utils/src/generateUtilityClass/generateUtilityClass.ts
@@ -13,19 +13,25 @@ export type GlobalStateSlot =
   | 'selected';
 
 const globalStateClassesMapping: Record<GlobalStateSlot, string> = {
-  active: 'Mui-active',
-  checked: 'Mui-checked',
-  completed: 'Mui-completed',
-  disabled: 'Mui-disabled',
-  error: 'Mui-error',
-  expanded: 'Mui-expanded',
-  focused: 'Mui-focused',
-  focusVisible: 'Mui-focusVisible',
-  required: 'Mui-required',
-  selected: 'Mui-selected',
+  active: 'active',
+  checked: 'checked',
+  completed: 'completed',
+  disabled: 'disabled',
+  error: 'error',
+  expanded: 'expanded',
+  focused: 'focused',
+  focusVisible: 'focusVisible',
+  required: 'required',
+  selected: 'selected',
 };
 
-export default function generateUtilityClass(componentName: string, slot: string): string {
+export default function generateUtilityClass(
+  componentName: string,
+  slot: string,
+  globalStatePrefix = 'Mui',
+): string {
   const globalStateClass = globalStateClassesMapping[slot as GlobalStateSlot];
-  return globalStateClass || `${ClassNameGenerator.generate(componentName)}-${slot}`;
+  return globalStateClass
+    ? `${globalStatePrefix}-${globalStateClass}`
+    : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }
diff --git a/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts b/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts
index 61973f3aa9a26c..235916d2ea8f1e 100644
--- a/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts
+++ b/packages/mui-utils/src/generateUtilityClasses/generateUtilityClasses.ts
@@ -3,11 +3,12 @@ import generateUtilityClass from '../generateUtilityClass';
 export default function generateUtilityClasses<T extends string>(
   componentName: string,
   slots: T[],
+  globalStatePrefix = 'Mui',
 ): Record<T, string> {
   const result: Record<string, string> = {};
 
   slots.forEach((slot) => {
-    result[slot] = generateUtilityClass(componentName, slot);
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
   });
 
   return result;