Pull ScrollIndicatedDialogContent styles up

src/components/ScrollIndicatedDialogContent.js

 import PropTypes from 'prop-types';
 import DialogContent from '@mui/material/DialogContent';
+import { styled } from '@mui/material/styles';
 
-/**
- * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component
- *                                to indicate there is scrollable content
-*/
-export function ScrollIndicatedDialogContent(props) {
-  const { classes, className, ...otherProps } = props;
-  const ourClassName = [className, classes.shadowScrollDialog].join(' ');
-
-  return (
-    <DialogContent
-      sx={{
+const Root = styled(DialogContent, { name: 'ScrollIndicatedDialogContent', slot: 'root' })(({ theme }) => ({
   /* 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%, `
+  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(${'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%, `
+  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%;',
@@ -29,7 +20,18 @@ export function ScrollIndicatedDialogContent(props) {
   backgroundRepeat: 'no-repeat',
   backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
   overflowY: 'auto',
-      }}
+}));
+
+/**
+ * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component
+ *                                to indicate there is scrollable content
+*/
+export function ScrollIndicatedDialogContent(props) {
+  const { classes, className, ...otherProps } = props;
+  const ourClassName = [className, classes.shadowScrollDialog].join(' ');
+
+  return (
+    <Root
       className={ourClassName}
       {...otherProps}
     />