fix(striker-ui): isolate styled OutlinedInputLabel

striker-ui/components/Files/FileInfo.tsx

@@ -4,8 +4,6 @@ import {
   FormControl,
   FormControlLabel,
   FormGroup,
-  InputLabel,
-  inputLabelClasses,
   MenuItem,
   menuItemClasses,
   Select,
@@ -18,17 +16,11 @@ import {
 } from '@mui/icons-material';
 import { v4 as uuidv4 } from 'uuid';
 
-import {
-  BLACK,
-  BLUE,
-  BORDER_RADIUS,
-  GREY,
-  RED,
-  TEXT,
-} from '../../lib/consts/DEFAULT_THEME';
+import { BLUE, GREY, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES';
 
 import OutlinedInput from '../OutlinedInput';
+import OutlinedInputLabel from '../OutlinedInputLabel';
 
 type FileInfoProps = Pick<FileDetailMetadata, 'fileName' | 'fileLocations'> &
   Partial<Pick<FileDetailMetadata, 'fileType'>> & {
@@ -41,17 +33,6 @@ const FILE_INFO_DEFAULT_PROPS: Partial<FileInfoProps> = {
   onChange: undefined,
 };
 
-const StyledInputLabel = styled(InputLabel)({
-  color: GREY,
-
-  [`&.${inputLabelClasses.focused}`]: {
-    backgroundColor: GREY,
-    borderRadius: BORDER_RADIUS,
-    color: BLACK,
-    padding: '.1em .6em',
-  },
-});
-
 const StyledSelect = styled(Select)({
   [`& .${selectClasses.icon}`]: {
     color: GREY,
@@ -104,9 +85,9 @@ const FileInfo = (
   return (
     <FormGroup sx={{ '> :not(:first-child)': { marginTop: '1em' } }}>
       <FormControl>
-        <StyledInputLabel htmlFor={fileNameElementId} variant="outlined">
+        <OutlinedInputLabel htmlFor={fileNameElementId}>
           {fileNameElementLabel}
-        </StyledInputLabel>
+        </OutlinedInputLabel>
         <OutlinedInput
           defaultValue={fileName}
           disabled={isReadonly}
@@ -119,9 +100,9 @@ const FileInfo = (
       </FormControl>
       {fileType && (
         <FormControl>
-          <StyledInputLabel htmlFor={fileTypeElementId} variant="outlined">
+          <OutlinedInputLabel htmlFor={fileTypeElementId}>
             {fileTypeElementLabel}
-          </StyledInputLabel>
+          </OutlinedInputLabel>
           <StyledSelect
             defaultValue={fileType}
             disabled={isReadonly}

striker-ui/components/OutlinedInputLabel/OutlinedInputLabel.tsx

@@ -0,0 +1,31 @@
+import {
+  InputLabel as MUIInputLabel,
+  inputLabelClasses as muiInputLabelClasses,
+  InputLabelProps as MUIInputLabelProps,
+} from '@mui/material';
+
+import { BLACK, BORDER_RADIUS, GREY } from '../../lib/consts/DEFAULT_THEME';
+
+const OutlinedInputLabel = ({
+  children,
+  htmlFor,
+}: MUIInputLabelProps): JSX.Element => (
+  <MUIInputLabel
+    {...{ htmlFor }}
+    sx={{
+      color: GREY,
+
+      [`&.${muiInputLabelClasses.focused}`]: {
+        backgroundColor: GREY,
+        borderRadius: BORDER_RADIUS,
+        color: BLACK,
+        padding: '.1em .6em',
+      },
+    }}
+    variant="outlined"
+  >
+    {children}
+  </MUIInputLabel>
+);
+
+export default OutlinedInputLabel;

striker-ui/components/OutlinedInputLabel/index.tsx

@@ -0,0 +1,3 @@
+import OutlinedInputLabel from './OutlinedInputLabel';
+
+export default OutlinedInputLabel;