react-select background color issues

Question

Having a problem with using className prop. What's happening for me is that only the parent div gets the class and the children divs don't. As a result, they end up having background color white instead of the override color.

<Select
    className="games-dropdown-2"
    defaultValue={colourOptions[0]}
    name="color"
    options={colourOptions}
/>

Below is the css class

.games-dropdown-2 {
  background-color: #023950;
  color: #FFFFFF;
  padding-left: 15px;
  width: 93%;
}

Another problem is that the child div seems to be inheriting border css from the grandparent div which is weird.

Attaching an image to give idea. react-select-classname-issue

Answer 1

For v2 it's way easier to use style-in-JS in order to customize your select. So in your case you can try something like this:

const customStyles = {
  control: (base, state) => ({
    ...base,
    background: "#023950",
    // match with the menu
    borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
    // Overwrittes the different states of border
    borderColor: state.isFocused ? "yellow" : "green",
    // Removes weird border around container
    boxShadow: state.isFocused ? null : null,
    "&:hover": {
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "red" : "blue"
    }
  }),
  menu: base => ({
    ...base,
    // override border radius to match the box
    borderRadius: 0,
    // kill the gap
    marginTop: 0
  }),
  menuList: base => ({
    ...base,
    // kill the white space on first and last option
    padding: 0
  })
};

<Select styles={customStyles} options={options} />

If you need to use thus select in different files I would recommend to create a custom component so you won't have to repeat the style everywhere.

By default the text will take the color define in your general CSS file.

Here the live example.

UPDATE

Following your request in comment I have updated the code above and here a new live example.

Answer 2

you can solve your background color issue like below and people have also faced some issue of z-index that also solved

const colourStyles = {
menuList: styles => ({
    ...styles,
    background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
    ...styles,
    background: isFocused
        ? 'hsla(291, 64%, 42%, 0.5)'
        : isSelected
            ? 'hsla(291, 64%, 42%, 1)'
            : undefined,
    zIndex: 1
}),
menu: base => ({
    ...base,
    zIndex: 100
})
}

    const options = [
    {value: 'chocolate', label: 'Chocolate'},
    {value: 'strawberry', label: 'Strawberry'},
    ]

<Select
   // defaultValue={[colourOptions[2], colourOptions[3]]}
      name="colors"
      options={options}
      className="basic-multi-select"
      classNamePrefix="select"
      styles={colourStyles}
   />