diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index 4eda17e5298d4f..568496a14bf8ce 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -255,7 +255,7 @@ export default function ApiPage(props) {
         <PropertiesSection
           properties={componentProps}
           propertiesDescriptions={propDescriptions}
-          targetName={pageContent.name}
+          componentName={pageContent.name}
           spreadHint={spreadHint}
         />
         {cssComponent && (
diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
index f4ddc361e5e649..45136bd89b2333 100644
--- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import kebabCase from 'lodash/kebabCase';
 import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import ExpandableApiItem, {
@@ -34,17 +35,18 @@ const StyledApiItem = styled(ExpandableApiItem)(
   }),
 );
 
+type HashParams = { componentName: string; className: string };
+
+export function getHash({ componentName, className }: HashParams) {
+  return `${kebabCase(componentName)}-classes-${className}`;
+}
+
 type ClassesListProps = {
   componentName: string;
   classes: ComponentClassDefinition[];
   displayOption: 'collapsed' | 'expanded';
   displayClassKeys?: boolean;
 };
-type HashParams = { componentName?: string; className: string };
-
-export function getHash({ componentName, className }: HashParams) {
-  return `${componentName ? `${componentName}-` : ''}classes-${className}`;
-}
 
 export default function ClassesList(props: ClassesListProps) {
   const { classes, displayOption, componentName, displayClassKeys } = props;
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index e232a180ba023f..934640aa20a671 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import kebabCase from 'lodash/kebabCase';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import {
   brandingDarkTheme as darkTheme,
@@ -99,12 +100,12 @@ function PropDescription(props: { description: string }) {
 }
 
 export function getHash({
-  targetName,
+  componentName,
   propName,
   hooksParameters,
   hooksReturnValue,
 }: {
-  targetName: string;
+  componentName: string;
   propName: string;
   hooksParameters?: boolean;
   hooksReturnValue?: boolean;
@@ -115,11 +116,11 @@ export function getHash({
   } else if (hooksReturnValue) {
     sectionName = 'return-value';
   }
-  return `${targetName ? `${targetName}-` : ''}${sectionName}-${propName}`;
+  return `${kebabCase(componentName)}-${sectionName}-${propName}`;
 }
 
 export interface PropDescriptionParams {
-  targetName: string;
+  componentName: string;
   propName: string;
   description?: string;
   requiresRef?: string;
@@ -149,7 +150,7 @@ export default function PropertiesList(props: PropertiesListProps) {
     <ApiItemContaier>
       {properties.map((params) => {
         const {
-          targetName,
+          componentName,
           propName,
           description,
           requiresRef,
@@ -169,7 +170,7 @@ export default function PropertiesList(props: PropertiesListProps) {
         return (
           <StyledApiItem
             key={propName}
-            id={getHash({ targetName, propName, hooksParameters, hooksReturnValue })}
+            id={getHash({ componentName, propName, hooksParameters, hooksReturnValue })}
             title={propName}
             note={(isOptional && 'Optional') || (isRequired && 'Required') || ''}
             type="props"
diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
index 32d4cd4215a823..03db0f5396e06f 100644
--- a/docs/src/modules/components/ApiPage/list/SlotsList.tsx
+++ b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
@@ -43,20 +43,20 @@ const StyledApiItem = styled(ExpandableApiItem)(
   }),
 );
 
+type HashParams = { componentName: string; className: string };
+
+export function getHash({ componentName, className }: HashParams) {
+  return `${componentName}-css-${className}`;
+}
+
 export type SlotsFormatedParams = {
   className: string;
-  componentName?: string;
+  componentName: string;
   description?: string;
   name: string;
   defaultValue?: string;
 };
 
-type HashParams = { componentName?: string; className: string };
-
-export function getHash({ componentName, className }: HashParams) {
-  return `${componentName ? `${componentName}-` : ''}css-${className}`;
-}
-
 interface SlotsListProps {
   slots: SlotsFormatedParams[];
   displayOption: 'collapsed' | 'expanded';
diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
index a6a145ef32053d..b03abff54739fa 100644
--- a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
+++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -26,7 +26,7 @@ export function getPropsToC({
         .filter(([, propData]) => propData.description !== '@ignore')
         .map(([propName]) => ({
           text: propName,
-          hash: getHash({ propName, targetName: componentName }),
+          hash: getHash({ propName, componentName }),
           children: [],
         })),
       ...(inheritance
@@ -43,7 +43,7 @@ export default function PropertiesSection(props) {
   const {
     properties,
     propertiesDescriptions,
-    targetName = '',
+    componentName = '',
     showOptionalAbbr = false,
     title = 'api-docs.props',
     titleHash = 'props',
@@ -87,7 +87,7 @@ export default function PropertiesSection(props) {
         propertiesDescriptions[propName].typeDescriptions[propData.signature.returned];
 
       return {
-        targetName,
+        componentName,
         propName,
         description: propDescription?.description,
         requiresRef: propDescription?.requiresRef,
@@ -135,6 +135,7 @@ export default function PropertiesSection(props) {
 }
 
 PropertiesSection.propTypes = {
+  componentName: PropTypes.string,
   hooksParameters: PropTypes.bool,
   hooksReturnValue: PropTypes.bool,
   level: PropTypes.string,
@@ -142,7 +143,6 @@ PropertiesSection.propTypes = {
   propertiesDescriptions: PropTypes.object.isRequired,
   showOptionalAbbr: PropTypes.bool,
   spreadHint: PropTypes.string,
-  targetName: PropTypes.string,
   title: PropTypes.string,
   titleHash: PropTypes.string,
 };
diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
index 00a2245f6b69c2..966f578855f484 100644
--- a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
+++ b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
@@ -12,7 +12,7 @@ import SlotsTable from 'docs/src/modules/components/ApiPage/table/SlotsTable';
 export type SlotsSectionProps = {
   componentSlots: { class: string; name: string; default: string }[];
   slotDescriptions: { [key: string]: string };
-  componentName?: string;
+  componentName: string;
   title?: string;
   titleHash?: string;
   level?: 'h2' | 'h3' | 'h4';
@@ -38,9 +38,8 @@ export default function SlotsSection(props: SlotsSectionProps) {
   }
 
   const formatedSlots = componentSlots?.map(({ class: className, name, default: defaultValue }) => {
-    const description = slotDescriptions[name];
     return {
-      description,
+      description: slotDescriptions[name],
       className,
       name,
       defaultValue,
diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
index aa62403018b8cf..f97dbfdff9c190 100644
--- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
@@ -7,6 +7,7 @@ import {
   brandingLightTheme as lightTheme,
 } from 'docs/src/modules/brandingTheme';
 import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList';
+import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
@@ -53,35 +54,39 @@ interface ClassesTableProps {
 export default function ClassesTable(props: ClassesTableProps) {
   const { classes, componentName, displayClassKeys } = props;
   return (
-    <StyledTable>
-      <thead>
-        <tr>
-          <th>Class name</th>
-          {displayClassKeys && <th>Rule name</th>}
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {classes.map((params) => {
-          const { className, key, description, isGlobal } = params;
+    <StyledTableContainer>
+      <StyledTable>
+        <thead>
+          <tr>
+            <th>Class name</th>
+            {displayClassKeys && <th>Rule name</th>}
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {classes.map((params) => {
+            const { className, key, description, isGlobal } = params;
 
-          return (
-            <tr key={className} id={getHash({ componentName, className: key })}>
-              <td>
-                <span className="class-name">.{className}</span>
-              </td>
-              {displayClassKeys && <td>{!isGlobal && <span className="class-key">{key}</span>}</td>}
-              <td>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: description || '',
-                  }}
-                />
-              </td>
-            </tr>
-          );
-        })}
-      </tbody>
-    </StyledTable>
+            return (
+              <tr key={className} id={getHash({ componentName, className: key })}>
+                <td>
+                  <span className="class-name">.{className}</span>
+                </td>
+                {displayClassKeys && (
+                  <td>{!isGlobal && <span className="class-key">{key}</span>}</td>
+                )}
+                <td>
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: description || '',
+                    }}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </StyledTable>
+    </StyledTableContainer>
   );
 }
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
index 320781d92491a4..5dc1581b9c3668 100644
--- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -175,7 +175,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
         <tbody>
           {properties.map((params) => {
             const {
-              targetName,
+              componentName,
               propName,
               description,
               requiresRef,
@@ -196,7 +196,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
             return (
               <tr
                 key={propName}
-                id={getHash({ targetName, propName, hooksParameters, hooksReturnValue })}
+                id={getHash({ componentName, propName, hooksParameters, hooksReturnValue })}
               >
                 <td className="MuiApi-table-item-title">
                   {propName}
diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js
index 6e0031494cb80c..d76390a243fd48 100644
--- a/docs/src/modules/components/ComponentsApiContent.js
+++ b/docs/src/modules/components/ComponentsApiContent.js
@@ -146,7 +146,7 @@ export default function ComponentsApiContent(props) {
           <PropertiesSection
             properties={componentProps}
             propertiesDescriptions={propDescriptions}
-            targetName={componentNameKebabCase}
+            componentName={componentName}
             spreadHint={spreadHint}
             level="h3"
             titleHash={`${componentNameKebabCase}-props`}