fix(striker-ui): allow OutlinedInputLabel style override

striker-ui/components/OutlinedInputLabel/OutlinedInputLabel.tsx

@@ -6,26 +6,38 @@ import {
 
 import { BLACK, BORDER_RADIUS, GREY } from '../../lib/consts/DEFAULT_THEME';
 
-const OutlinedInputLabel = ({
-  children,
-  htmlFor,
-}: MUIInputLabelProps): JSX.Element => (
-  <MUIInputLabel
-    {...{ htmlFor }}
-    sx={{
-      color: GREY,
+const OutlinedInputLabel = (
+  inputLabelProps: MUIInputLabelProps,
+): JSX.Element => {
+  const { children, sx } = inputLabelProps;
+  const combinedSx = {
+    color: GREY,
 
-      [`&.${muiInputLabelClasses.focused}`]: {
-        backgroundColor: GREY,
-        borderRadius: BORDER_RADIUS,
-        color: BLACK,
-        padding: '.1em .6em',
-      },
-    }}
-    variant="outlined"
-  >
-    {children}
-  </MUIInputLabel>
-);
+    [`&.${muiInputLabelClasses.focused}`]: {
+      backgroundColor: GREY,
+      borderRadius: BORDER_RADIUS,
+      color: BLACK,
+      padding: '.1em .6em',
+    },
+
+    ...sx,
+  };
+
+  return (
+    <MUIInputLabel
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...{
+        // 1. Specify default props.
+        variant: 'outlined',
+        // 2. Override defaults with given props.
+        ...inputLabelProps,
+        // 3. Combine the default and given for props that can be both extended or override.
+        sx: combinedSx,
+      }}
+    >
+      {children}
+    </MUIInputLabel>
+  );
+};
 
 export default OutlinedInputLabel;