CODEWITHSUNDEEP
reactjsreact-select
digitalchill
digitalchill

Reputation: 173

react-select background color issues

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

Upvotes: 13

Views: 46628

Answers (2)

Partho
Partho

Reputation: 2715

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}
   />

Upvotes: 5

Laura
Laura

Reputation: 8630

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} />

enter image description here 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.

enter image description here

Upvotes: 48

Related Questions