[docs][Accordion] Replace hardcoded classes with constants in demos (#…

…44453)
mui · Nov 18, 2024 · 5849e4d · 5849e4d
1 parent 7781a01
commit 5849e4d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/docs/data/material/components/accordion/AccordionTransition.js b/docs/data/material/components/accordion/AccordionTransition.js
@@ -1,7 +1,9 @@
 import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
+import Accordion, { accordionClasses } from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Fade from '@mui/material/Fade';
@@ -23,18 +25,18 @@ export default function AccordionTransition() {
         sx={[
           expanded
             ? {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 'auto',
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'block',
                 },
               }
             : {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 0,
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'none',
                 },
               },

diff --git a/docs/data/material/components/accordion/AccordionTransition.tsx b/docs/data/material/components/accordion/AccordionTransition.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import Accordion, { AccordionSlots } from '@mui/material/Accordion';
+import Accordion, {
+  AccordionSlots,
+  accordionClasses,
+} from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Fade from '@mui/material/Fade';
@@ -23,18 +28,18 @@ export default function AccordionTransition() {
         sx={[
           expanded
             ? {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 'auto',
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'block',
                 },
               }
             : {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 0,
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'none',
                 },
               },

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.js b/docs/data/material/components/accordion/CustomizedAccordions.js
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import MuiAccordion from '@mui/material/Accordion';
-import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import MuiAccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 
@@ -26,10 +28,11 @@ const AccordionSummary = styled((props) => (
 ))(({ theme }) => ({
   backgroundColor: 'rgba(0, 0, 0, .03)',
   flexDirection: 'row-reverse',
-  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
-    transform: 'rotate(90deg)',
-  },
-  '& .MuiAccordionSummary-content': {
+  [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]:
+    {
+      transform: 'rotate(90deg)',
+    },
+  [`& .${accordionSummaryClasses.content}`]: {
     marginLeft: theme.spacing(1),
   },
   ...theme.applyStyles('dark', {

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.tsx b/docs/data/material/components/accordion/CustomizedAccordions.tsx
@@ -4,6 +4,7 @@ import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
 import MuiAccordionSummary, {
   AccordionSummaryProps,
+  accordionSummaryClasses,
 } from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
@@ -28,10 +29,11 @@ const AccordionSummary = styled((props: AccordionSummaryProps) => (
 ))(({ theme }) => ({
   backgroundColor: 'rgba(0, 0, 0, .03)',
   flexDirection: 'row-reverse',
-  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
-    transform: 'rotate(90deg)',
-  },
-  '& .MuiAccordionSummary-content': {
+  [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]:
+    {
+      transform: 'rotate(90deg)',
+    },
+  [`& .${accordionSummaryClasses.content}`]: {
     marginLeft: theme.spacing(1),
   },
   ...theme.applyStyles('dark', {