chore: Tidy up hardcoded MUI classnames (#3000)

theopensystemslab · Apr 9, 2024 · 8900e4c · 8900e4c
1 parent 7da0ef3
commit 8900e4c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx
@@ -1,6 +1,8 @@
-import Accordion from "@mui/material/Accordion";
+import Accordion, { accordionClasses } from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
-import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from "@mui/material/AccordionSummary";
 import Box, { BoxProps } from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
@@ -58,7 +60,7 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
   padding: "0",
   margin: "0",
   minHeight: "0",
-  "&.Mui-expanded": {
+  [`&.${accordionClasses.root}.Mui-expanded`]: {
     minHeight: "0",
   },
   "& > div": {
@@ -108,7 +110,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     backgroundColor: theme.palette.border.main,
     zIndex: "2",
   },
-  "&.Mui-expanded": {
+  [`&.${accordionSummaryClasses.root}.Mui-expanded`]: {
     margin: "0",
   },
   [`&.${classes.removeTopBorder}`]: {

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
@@ -14,7 +14,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import MenuItem from "@mui/material/MenuItem";
 import Paper from "@mui/material/Paper";
-import Popover from "@mui/material/Popover";
+import Popover, { popoverClasses } from "@mui/material/Popover";
 import { styled, Theme } from "@mui/material/styles";
 import MuiToolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
@@ -94,7 +94,7 @@ const ProfileSection = styled(MuiToolbar)(({ theme }) => ({
 }));
 
 const StyledPopover = styled(Popover)(() => ({
-  ["& .MuiPopover-paper"]: {
+  [`& .${popoverClasses.paper}`]: {
     boxShadow: "4px 4px 0px rgba(150, 150, 150, 0.5)",
     backgroundColor: "#2c2c2c",
     borderRadius: 0,

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -1,5 +1,6 @@
 import "themeOverrides.d.ts";
 
+import { radioClasses } from "@mui/material/Radio";
 import {
   createTheme,
   darken,
@@ -12,6 +13,7 @@ import {
 import createPalette, {
   PaletteOptions,
 } from "@mui/material/styles/createPalette";
+import { svgIconClasses } from "@mui/material/SvgIcon";
 import { deepmerge } from "@mui/utils";
 import { TeamTheme } from "@opensystemslab/planx-core/types";
 import { getContrastTextColor } from "styleUtils";
@@ -427,7 +429,7 @@ const getThemeOptions = ({
             padding: 0,
             margin: "0 0.75em 0 0",
             color: palette.text.primary,
-            "& .MuiSvgIcon-root": {
+            [`& .${svgIconClasses.root}`]: {
               // Hide default MUI SVG, we'll use pseudo elements as Gov.uk
               visibility: "hidden",
             },
@@ -460,10 +462,10 @@ const getThemeOptions = ({
               // Hide by default, show if checked
               opacity: 0,
             },
-            "&.Mui-checked::after": {
+            [`&.${radioClasses.checked}.Mui-checked::after`]: {
               opacity: 1,
             },
-            "&.Mui-focusVisible::before": {
+            [`&.${radioClasses.root}.Mui-focusVisible::before`]: {
               borderWidth: "4px",
               outline: "3px solid rgba(0,0,0,0)",
               outlineOffset: "1px",

diff --git a/editor.planx.uk/src/ui/editor/SelectInput.tsx b/editor.planx.uk/src/ui/editor/SelectInput.tsx
@@ -1,5 +1,5 @@
 import ArrowIcon from "@mui/icons-material/KeyboardArrowDown";
-import Select, { SelectProps } from "@mui/material/Select";
+import Select, { selectClasses,SelectProps } from "@mui/material/Select";
 import { styled } from "@mui/material/styles";
 import React, { ReactNode } from "react";
 
@@ -25,7 +25,7 @@ const Root = styled(Select)(({ theme }) => ({
   padding: 0,
   height: 50,
   backgroundColor: "#fff",
-  "& .MuiSelect-select": {
+  [`& .${selectClasses.select}`]: {
     width: "100%",
     padding: theme.spacing(1, 1.5),
   },