Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main background colour #51

Open
BenjaminIrwin opened this issue Jul 24, 2023 · 2 comments
Open

Main background colour #51

BenjaminIrwin opened this issue Jul 24, 2023 · 2 comments

Comments

@BenjaminIrwin
Copy link

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",
          }} 
image
@BenjaminIrwin
Copy link
Author

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

@jbundziow
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants