Open BenjaminIrwin opened 1 year ago
Just wanted to bump this. Very keen to use this component if I can change it's color.
Look at the example in the npm docs:
<Select
value={animal}
onChange={handleChange}
options={options}
classNames={{
menuButton: ({ isDisabled }) => (
`flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none ${
isDisabled
? "bg-gray-200"
: "bg-white hover:border-gray-400 focus:border-blue-500 focus:ring focus:ring-blue-500/20"
}`
),
menu: "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
listItem: ({ isSelected }) => (
`block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${
isSelected
? `text-white bg-blue-500`
: `text-gray-500 hover:bg-blue-100 hover:text-blue-500`
}`
)
}}
/>
Background color can be changed in 'menuButton' property. Just add here bg-black
for example.
Background color of the list when component is clicked can be set in 'menu' property.
Love this, great work. Is there a way to change the background colour of the component? Mine is always white, even with the following classnames: