diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index d4fd278436927e..c4645d61754410 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -119,7 +119,7 @@ PropsTable.propTypes = {
 };
 
 function ClassesTable(props) {
-  const { componentName, componentStyles, classDescriptions } = props;
+  const { componentStyles, classDescriptions } = props;
   const t = useTranslate();
 
   return (
@@ -139,7 +139,8 @@ function ClassesTable(props) {
             </td>
             <td align="left">
               <span className="prop-name">
-                .{componentStyles.globalClasses[className] || `Mui${componentName}-${className}`}
+                .
+                {componentStyles.globalClasses[className] || `${componentStyles.name}-${className}`}
               </span>
             </td>
             <td
@@ -161,7 +162,6 @@ function ClassesTable(props) {
 
 ClassesTable.propTypes = {
   classDescriptions: PropTypes.object.isRequired,
-  componentName: PropTypes.string.isRequired,
   componentStyles: PropTypes.object.isRequired,
 };
 
@@ -371,11 +371,7 @@ import { ${componentName} } from '${source}';`}
         {Object.keys(componentStyles.classes).length ? (
           <React.Fragment>
             <Heading hash="css" />
-            <ClassesTable
-              componentName={componentName}
-              componentStyles={componentStyles}
-              classDescriptions={classDescriptions}
-            />
+            <ClassesTable componentStyles={componentStyles} classDescriptions={classDescriptions} />
             <br />
             <span dangerouslySetInnerHTML={{ __html: t('api-docs.overrideStyles') }} />
             <span