Блог

Есть какие-либо предложения, почему этот код не устанавливает цвет фона для выбора?

У меня есть образец, созданный в следующем месте

https://codesandbox.io/s/react-select-basic-forked-3z0kd?file=/src/index.js

Добавьте это за пределами вашего класса:

 // BACKGROUND STYLES

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,
    "amp;: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
          value={this.state.selectedOption}
          onChange={this.handleChange}
          options={this.options}
          styles={customStyles}
        />
 

вот ваш код с рабочим цветом фона:
https://codesandbox.io/s/react-select-basic-forked-5uyfb?file=/src/index.js

Ваше здоровье!