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

Could you provide a screenshot so I'll be sure that I'm seeing the same problem as you ? I think I have the answer — Laura
I already have it attached. Just click on the link above that says 'Attaching an image to give an idea.' — digitalchill

Laura Laura · Accepted Answer · 2018-08-14T15:05:27

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.

react-select background color issues

1 Answers

UPDATE