fix(striker-ui): separate type and render() in ContainedButton

striker-ui/components/ContainedButton.tsx

@@ -1,41 +1,33 @@
-import {
-  Button as MUIButton,
-  ButtonProps as MUIButtonProps,
-} from '@mui/material';
+import { Button as MUIButton, SxProps, Theme } from '@mui/material';
+import { FC, useMemo } from 'react';
 
 import { BLACK, GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
 
-type ContainedButtonProps = MUIButtonProps;
+const ContainedButton: FC<ContainedButtonProps> = ({ sx, ...restProps }) => {
+  const combinedSx = useMemo<SxProps<Theme>>(
+    () => ({
+      backgroundColor: TEXT,
+      color: BLACK,
+      textTransform: 'none',
 
-const ContainedButton = (
-  containedButtonProps: ContainedButtonProps,
-): JSX.Element => {
-  const { children, sx } = containedButtonProps;
-  const combinedSx: ContainedButtonProps['sx'] = {
-    backgroundColor: TEXT,
-    color: BLACK,
-    textTransform: 'none',
+      '&:hover': {
+        backgroundColor: GREY,
+      },
 
-    '&:hover': {
-      backgroundColor: GREY,
-    },
-
-    ...sx,
-  };
+      ...sx,
+    }),
+    [sx],
+  );
 
   return (
     <MUIButton
       {...{
         variant: 'contained',
-        ...containedButtonProps,
+        ...restProps,
         sx: combinedSx,
       }}
-    >
-      {children}
-    </MUIButton>
+    />
   );
 };
 
-export type { ContainedButtonProps };
-
 export default ContainedButton;

striker-ui/components/ProvisionServerDialog.tsx

@@ -15,7 +15,7 @@ import { BLUE, RED, TEXT } from '../lib/consts/DEFAULT_THEME';
 
 import Autocomplete from './Autocomplete';
 import ConfirmDialog from './ConfirmDialog';
-import ContainedButton, { ContainedButtonProps } from './ContainedButton';
+import ContainedButton from './ContainedButton';
 import { dsize, dsizeToByte } from '../lib/format_data_size_wrappers';
 import IconButton, { IconButtonProps } from './IconButton';
 import mainAxiosInstance from '../lib/singletons/mainAxiosInstance';

striker-ui/components/SuggestButton.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import ContainedButton, { ContainedButtonProps } from './ContainedButton';
+import ContainedButton from './ContainedButton';
 
 type SuggestButtonOptionalProps = {
   show?: boolean;

striker-ui/types/ContainedButton.d.ts

@@ -0,0 +1 @@
+type ContainedButtonProps = import('@mui/material').ButtonProps;