refactor: [M3-6395] – MUI v5 Migration - Components > StackScript (#…

…8992)

packages/manager/src/components/StackScript/StackScript.tsx

@@ -1,23 +1,23 @@
 import { StackScript as StackScriptType } from '@linode/api-v4/lib/stackscripts';
+import Box from '@mui/material/Box';
+import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import Button from 'src/components/Button';
 import CopyTooltip from 'src/components/CopyTooltip';
 import Chip from 'src/components/core/Chip';
 import Divider from 'src/components/core/Divider';
-import { makeStyles } from '@mui/styles';
-import { Theme, useTheme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import DateTimeDisplay from 'src/components/DateTimeDisplay';
 import H1Header from 'src/components/H1Header';
 import ScriptCode from 'src/components/ScriptCode';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { listToItemsByID } from 'src/queries/base';
 import { useAllImagesQuery } from 'src/queries/images';
-import Box from '@mui/material/Box';
+import { makeStyles } from 'tss-react/mui';
 import TooltipIcon from '../TooltipIcon';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     backgroundColor: theme.bg.bgPaper,
     '.detailsWrapper &': {
@@ -73,7 +73,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-export interface Props {
+export interface StackScriptProps {
   data: StackScriptType;
   userCanModify: boolean;
 }
@@ -83,7 +83,7 @@ interface StackScriptImages {
   deprecated: JSX.Element[];
 }
 
-export const StackScript: React.FC<Props> = (props) => {
+export const StackScript = (props: StackScriptProps) => {
   const {
     data: {
       username,
@@ -99,10 +99,11 @@ export const StackScript: React.FC<Props> = (props) => {
     userCanModify,
   } = props;
 
+  const { classes } = useStyles();
+  const { profile } = useAccountManagement();
+
   const theme = useTheme();
-  const classes = useStyles();
   const history = useHistory();
-  const { profile } = useAccountManagement();
 
   const { data: imagesData } = useAllImagesQuery(
     {},

packages/manager/src/components/StackScript/index.ts

@@ -1,4 +1,4 @@
-import StackScript, { Props as _Props } from './StackScript';
+import StackScript, { StackScriptProps } from './StackScript';
 export default StackScript;
 /* tslint:disable */
-export interface Props extends _Props {}
+export interface Props extends StackScriptProps {}