diff --git a/docs/components/props.js b/docs/components/props.js
index 62ccca5..34f328b 100644
--- a/docs/components/props.js
+++ b/docs/components/props.js
@@ -51,6 +51,14 @@ const Props = () => {
#68D391 |
Changes the highlighted colour of the selected option |
+
+
+ backgroundColor
+ |
+ String |
+ #F0F0F0 |
+ Changes the background colour of the options in the list |
+
className
diff --git a/docs/props.mdx b/docs/props.mdx
index c8f838c..b1ed34c 100644
--- a/docs/props.mdx
+++ b/docs/props.mdx
@@ -89,6 +89,7 @@ const App = () => {
style={{ margin: '10px' }}
hightlighColor='#C6F6D5'
selectedOptionColor='#68D391'
+ backgroundColor='#F0F0F0'
/>
)
@@ -259,12 +260,10 @@ const App = () => {
}
- renderLeftElement={()=> }
-
+ renderRightElement={() => }
+ renderLeftElement={() => }
/>
)
}
```
-
diff --git a/src/index.tsx b/src/index.tsx
index 6692777..d658fbf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,6 +28,7 @@ type ComboBoxProps = {
popoverClassName?: string
highlightColor?: string
selectedOptionColor?: string
+ backgroundColor?: string
enableAutocomplete?: boolean
inputStyles?: React.CSSProperties
name?: string
@@ -59,6 +60,7 @@ const ComboBox: React.FC = ({
popoverClassName,
highlightColor,
selectedOptionColor,
+ backgroundColor,
enableAutocomplete,
inputStyles,
name,
@@ -283,7 +285,7 @@ const ComboBox: React.FC = ({
return highlightColor || '#bee3f8'
} else if (optionIndex === selectedOptionIndex) {
return selectedOptionColor || '#63b3ed'
- } else return 'white'
+ } else return backgroundColor || 'white'
}
return (
|