add $ styleprop prefix for styled component props

dydxprotocol · Oct 21, 2024 · dec2128 · dec2128
1 parent 6b28487
commit dec2128
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
@@ -40,21 +40,21 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
             label={label}
             inputID={id}
             disabled={otherProps?.disabled}
-            backgroundColorOverride={backgroundColorOverride}
+            $backgroundColorOverride={backgroundColorOverride}
           >
             <Input
               ref={ref}
               id={id}
               {...otherProps}
-              backgroundColorOverride={backgroundColorOverride}
+              $backgroundColorOverride={backgroundColorOverride}
             />
           </$WithLabel>
         ) : (
           <Input
             ref={ref}
             id={id}
             {...otherProps}
-            backgroundColorOverride={backgroundColorOverride}
+            $backgroundColorOverride={backgroundColorOverride}
           />
         )}
         {slotRight}
@@ -110,12 +110,12 @@ const $InputContainer = styled.div<{
     `}
 `;
 
-const $WithLabel = styled(WithLabel)<{ disabled?: boolean; backgroundColorOverride?: string }>`
+const $WithLabel = styled(WithLabel)<{ disabled?: boolean; $backgroundColorOverride?: string }>`
   ${formMixins.inputLabel}
-  ${({ backgroundColorOverride }) =>
-    backgroundColorOverride &&
+  ${({ $backgroundColorOverride }) =>
+    $backgroundColorOverride &&
     css`
-      background-color: ${backgroundColorOverride};
+      background-color: ${$backgroundColorOverride};
     `}
 
   label {

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -26,7 +26,7 @@ export enum InputType {
 
 type StyleProps = {
   className?: string;
-  backgroundColorOverride?: string;
+  $backgroundColorOverride?: string;
 };
 
 type ElementProps = {
@@ -82,7 +82,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       onFocus,
       onInput,
       type = InputType.Number,
-      backgroundColorOverride,
+      $backgroundColorOverride: backgroundColorOverride,
       ...otherProps
     },
     ref
@@ -128,7 +128,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <$InputContainer className={className}>
         {type === InputType.Text || type === InputType.Search ? (
           <$Input
-            backgroundColorOverride={backgroundColorOverride}
+            $backgroundColorOverride={backgroundColorOverride}
             // React
             ref={ref}
             id={id}
@@ -148,7 +148,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           />
         ) : (
           <$NumericFormat
-            backgroundColorOverride={backgroundColorOverride}
+            $backgroundColorOverride={backgroundColorOverride}
             // React
             getInputRef={ref}
             id={id}
@@ -238,21 +238,21 @@ const InputStyle = css`
   }
 `;
 
-const $NumericFormat = styled(NumericFormat)<{ backgroundColorOverride?: string }>`
+const $NumericFormat = styled(NumericFormat)<{ $backgroundColorOverride?: string }>`
   ${InputStyle}
   font-feature-settings: var(--fontFeature-monoNumbers);
-  ${({ backgroundColorOverride }) =>
-    backgroundColorOverride &&
+  ${({ $backgroundColorOverride }) =>
+    $backgroundColorOverride &&
     css`
-      background-color: ${backgroundColorOverride};
+      background-color: ${$backgroundColorOverride};
     `}
 `;
 
-const $Input = styled.input<{ backgroundColorOverride?: string }>`
+const $Input = styled.input<{ $backgroundColorOverride?: string }>`
   ${InputStyle}
-  ${({ backgroundColorOverride }) =>
-    backgroundColorOverride &&
+  ${({ $backgroundColorOverride }) =>
+    $backgroundColorOverride &&
     css`
-      background-color: ${backgroundColorOverride};
+      background-color: ${$backgroundColorOverride};
     `}
 `;