反应选择nooptionsmessagecss无法正常工作



我正在尝试对反应进行一些样式。我已经做到了。我需要的事情是更改"无选项消息"的颜色。但是,正如我们在沙箱中看到的那样,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;

谢谢!

noOptionsMessageCSS更改为 noOptionsMessage,它应该起作用。

看起来DOC不正确。

相关内容

  • 没有找到相关文章

最新更新