Question

我正在尝试为react-select做一些样式设计。到目前为止，我已经制作了this。我需要做的是更改“无选项消息”的颜色。但是，正如我们在沙箱中看到的那样，颜色不会随着noOptionsMessageCSS改变。然后，如何更改它？

这是防止链接断开的代码：

import React from "react";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
  { value: "cream", label: "Cream" },
  { value: "blueberry", label: "Blueberry" },
  { value: "bubblegum", label: "Bubble Gum" },
  { value: "cherry", label: "Cherry" },
  { value: "cheese", label: "Cheese" },
  { value: "mocca", label: "Mocca" },
  { value: "cappucino", label: "Cappucino" },
  { value: "mint", label: "Mint" }
];

class App extends React.Component {
  state = {
    selectedOption: options[0]
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;

    const style = {
      // option: (base, state) => ({
      //   ...base,
      //   borderBottom: '1px dotted pink',
      //   color: state.isSelected ? 'red' : 'blue',
      //   padding: 20,
      // }),
      option: (base, state) => ({
        ...base,
        backgroundColor: state.isSelected ? "grey" : "grey",
        color: state.isSelected ? "white" : "black",
        ":active": {
          backgroundColor: state.isSelected ? "grey" : "grey",
          color: state.isSelected ? "white" : "white"
        }
      }),
      control: (base, state) => ({
        ...base,
        background: "white",
        borderRadius: 0,
        borderTop: 0,
        borderLeft: 0,
        borderRight: 0,
        // This line disable the blue border
        borderColor: state.isFocused ? "black" : "black",
        // boxShadowColor: 'red',
        boxShadow: state.isFocused ? 0 : 0
      }),
      menu: base => ({
        ...base,
        // override border radius to match the box
        borderRadius: 0,
        // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
        hyphens: "auto",
        // kill the gap
        marginTop: 0,
        textAlign: "left"
        // prevent menu to scroll y
        // wordWrap: "break-word"
      }),
      menuList: (base, state) => ({
        ...base,
        // kill the white space on first and last option
        padding: 0,
        backgroundColor: "grey",
        maxHeight: "80px",
        overflowY: "auto"
      }),
      indicatorSeparator: (base, state) => ({
        ...base,
        display: "none"
      }),
      dropdownIndicator: (base, state) => ({
        ...base,
        transition: "all .2s ease",
        transform: state.isFocused ? "rotate(180deg)" : null
      }),
      noOptionsMessageCSS: (base, state) => ({
        ...base,
        color: "white",
        backgroundColor: "blue"
      })
      // container: (base, state) => ({
      //   ...base,
      //   backgroundColor: "blue",
      //   color: "red"
      // })
    };

    return (
      <div style={{ width: "50%", margin: 20 }}>
        <Select
          value={selectedOption}
          onChange={this.handleChange}
          options={options}
          isClearable={true}
          styles={style}
          placeholder="Please Input"
          noOptionsMessage={() => "Zero Result"}
        />
      </div>
    );
  }
}

export default App;

谢谢！

Answer 1

将noOptionsMessageCSS更改为noOptionsMessage，应该可以。

看起来像doc is incorrect。

react-select noOptionsMessageCSS不起作用

1 个答案: