diff --git a/src/components/ScrollIndicatedDialogContent.js b/src/components/ScrollIndicatedDialogContent.js
index b05d29be3eac3c2d52a47b5e04849f97c2579a08..5e9770bc4212b3d6f370ff9a72185735640d8775 100644
--- a/src/components/ScrollIndicatedDialogContent.js
+++ b/src/components/ScrollIndicatedDialogContent.js
@@ -1,5 +1,26 @@
 import PropTypes from 'prop-types';
 import DialogContent from '@mui/material/DialogContent';
+import { styled } from '@mui/material/styles';
+
+const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ theme }) => ({
+  /* Shadow covers */
+  background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), `
+    + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
+    // Shaddows
+    + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+    + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,',
+  /* Shadow covers */
+  background: `linear-gradient(${theme.palette.background.paper} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
+    + `linear-gradient(rgba(255, 255, 255, 0), ${theme.palette.background.paper} 70%) 0 100%, `
+    // Shaddows
+    + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
+    + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
+
+  backgroundAttachment: 'local, local, scroll, scroll',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
+  overflowY: 'auto',
+}));
 
 /**
  * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component
@@ -10,26 +31,7 @@ export function ScrollIndicatedDialogContent(props) {
   const ourClassName = [className, classes.shadowScrollDialog].join(' ');
 
   return (
-    <DialogContent
-      sx={{
-        /* Shadow covers */
-        background: `linear-gradient(${'background.paper'} 30%, rgba(255, 255, 255, 0)), `
-    + `linear-gradient(rgba(255, 255, 255, 0), ${'background.paper'} 70%) 0 100%, `
-    // Shaddows
-    + 'radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
-    + 'radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%,',
-        /* Shadow covers */
-        background: `linear-gradient(${'background.paper'} 30%, rgba(255, 255, 255, 0)), ` // eslint-disable-line no-dupe-keys
-    + `linear-gradient(rgba(255, 255, 255, 0), ${'background.paper'} 70%) 0 100%, `
-    // Shaddows
-    + 'radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), '
-    + 'radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;',
-
-        backgroundAttachment: 'local, local, scroll, scroll',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
-        overflowY: 'auto',
-      }}
+    <Root
       className={ourClassName}
       {...otherProps}
     />