反应选择背景颜色

Question

有什么建议为什么这段代码没有为 Select 设置背景颜色？

我在以下位置创建了一个示例

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

Answer 1

在你的课堂之外添加这个：

// 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,
    "&: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 上实现它：

<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

干杯！