Main background colour

[BenjaminIrwin]

trafficstars

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:

            classNames={{
              menu: "absolute z-10 w-full bg-black shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
              searchContainer: "bg-black",
              searchBox: "bg-black",
          }} 

[BenjaminIrwin]

Just wanted to bump this. Very keen to use this component if I can change it's color.

[jbundziow]

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.