Merge pull request #28 from csandman/fix-input-styles

Fix input styles
csandman · Jan 7, 2022 · f2f2c72 · f2f2c72
2 parents 19c54b9 + de2b21a
commit f2f2c72
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chakra-react-select",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A chakra-ui wrapper for the popular select library react-select",
   "license": "MIT",
   "author": "Chris Sandvik <chris.sandvik@gmail.com>",

diff --git a/src/chakra-components.tsx b/src/chakra-components.tsx
@@ -954,16 +954,7 @@ const chakraComponents: ChakraSelectProps["components"] = {
       </Box>
     );
   },
-  Input: (props) => (
-    <chakra.input
-      as={selectComponents.Input}
-      __css={{
-        color: "inherit",
-        lineHeight: 1,
-      }}
-      {...props}
-    />
-  ),
+  Input: (props) => <chakra.input as={selectComponents.Input} {...props} />,
 };
 
 export default chakraComponents;
diff --git a/src/chakra-react-select.tsx b/src/chakra-react-select.tsx
@@ -8,6 +8,15 @@ import {
   TagVariant,
 } from "./types";
 
+// Custom styles for components which do not have a chakra equivalent
+const customStyles: ChakraSelectProps["styles"] = {
+  input: (provided) => ({
+    ...provided,
+    color: "inherit",
+    lineHeight: 1,
+  }),
+};
+
 const ChakraReactSelect = ({
   children,
   styles,
@@ -89,6 +98,7 @@ const ChakraReactSelect = ({
     inputId: inputId || inputProps.id,
     hasStickyGroupHeaders,
     placeholderColor,
+    styles: customStyles,
     chakraStyles,
     focusBorderColor,
     errorBorderColor,