fix(striker-ui): allow OutlinedInput style override

striker-ui/components/OutlinedInput/OutlinedInput.tsx

@@ -1,35 +1,52 @@
 import {
   OutlinedInput as MUIOutlinedInput,
   outlinedInputClasses as muiOutlinedInputClasses,
-  styled,
+  OutlinedInputProps as MUIOutlinedInputProps,
 } from '@mui/material';
 
 import { GREY, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 
-const OutlinedInput = styled(MUIOutlinedInput)({
-  color: GREY,
+const OutlinedInput = (
+  outlinedInputProps: MUIOutlinedInputProps,
+): JSX.Element => {
+  const { label, sx } = outlinedInputProps;
+  const combinedSx = {
+    color: GREY,
 
-  [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
-    borderColor: UNSELECTED,
-  },
-
-  '&:hover': {
     [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
-      borderColor: GREY,
+      borderColor: UNSELECTED,
+    },
+
+    '&:hover': {
+      [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
+        borderColor: GREY,
+      },
     },
-  },
 
-  [`&.${muiOutlinedInputClasses.focused}`]: {
-    color: TEXT,
+    [`&.${muiOutlinedInputClasses.focused}`]: {
+      color: TEXT,
 
-    [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
-      borderColor: GREY,
+      [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
+        borderColor: GREY,
 
-      '& legend': {
-        paddingRight: '1.2em',
+        '& legend': {
+          paddingRight: label ? '1.2em' : 0,
+        },
       },
     },
-  },
-});
+
+    ...sx,
+  };
+
+  return (
+    <MUIOutlinedInput
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...{
+        ...outlinedInputProps,
+        sx: combinedSx,
+      }}
+    />
+  );
+};
 
 export default OutlinedInput;