fix(striker-ui): allow OutlinedInputLabel style override

striker-ui/components/OutlinedInputLabel/OutlinedInputLabel.tsx

@@ -6,13 +6,11 @@ import {
 
 import { BLACK, BORDER_RADIUS, GREY } from '../../lib/consts/DEFAULT_THEME';
 
-const OutlinedInputLabel = ({
-  children,
-  htmlFor,
-}: MUIInputLabelProps): JSX.Element => (
-  <MUIInputLabel
-    {...{ htmlFor }}
-    sx={{
+const OutlinedInputLabel = (
+  inputLabelProps: MUIInputLabelProps,
+): JSX.Element => {
+  const { children, sx } = inputLabelProps;
+  const combinedSx = {
     color: GREY,
 
     [`&.${muiInputLabelClasses.focused}`]: {
@@ -21,11 +19,25 @@ const OutlinedInputLabel = ({
       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,
       }}
-    variant="outlined"
     >
       {children}
     </MUIInputLabel>
-);
+  );
+};
 
 export default OutlinedInputLabel;