如何设置 react-select 选项的样式

Question

设置 react-select 组件的 (https://github.com/JedWatson/react-select) 选项样式的最佳方式是什么？

我可以很好地定位 select 本身，例如：

...
import Select from 'react-select'
...
const styles = {
  fontSize: 14,
  color: 'blue',
}
<Select
    options={[1,2,3,4]}
    placeholder={'Select something'}
    clearable={false}
    style={styles.select}
/>

问题是，展开 select 时的实际选项仍保持默认样式。我如何定位这些样式选项？

这是我所说的一个例子。我可以设置占位符的样式，但不能设置选项：

Answer 1

反应 select v2（更新）

这个新版本引入了新的 styles-api 和其他一些重大变化。

自定义样式

Style individual components with custom css using the styles prop.

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled ? 'red' : blue,
      color: '#FFF',
      cursor: isDisabled ? 'not-allowed' : 'default',
      ...
    };
  },
  ...
};

export default () => (
  <Select
    defaultValue={items[0]}
    label="Single select"
    options={items}
    styles={colourStyles}
  />
);

现在项目网站上有更好的文档和更清晰的示例：

https://react-select.com/upgrade-guide#new-styles-api

https://react-select.com/home#custom-styles

https://react-select.com/styles#styles

react-select v1（旧答案 - 已弃用）

Custom classNames

您可以为组件提供一个自定义的 className 道具，该道具将被添加到外部容器的基础 .Select className 中。内置选项渲染器还支持自定义类名。

将您的自定义 className 作为属性添加到选项数组中的对象：

const options = [
    {label: "one", value: 1, className: 'custom-class'},
    {label: "two", value: 2, className: 'awesome-class'}
    // more options...
];
...
<Select options={options} />

MenuRender

menuRenderer 属性可用于覆盖默认的选项下拉列表。

optionClassName String The className that gets used for options

示例：react-select/master/src/utils/defaultMenuRenderer.js

Answer 2

我得到了使用风格：

const options = [
    {label: "one", value: 1, style: { color: 'red' }},
    {label: "two", value: 2, style: { color: 'blue' }}
    // more options...
];
...
<Select options={options} />

Answer 3

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
  })
}
<Select styles={customStyle} >

对此有更多选择。查看样式文档。

https://react-select.com/styles

Answer 4

@btzr 的回答是正确的，并且使用 CSS 类设计 react-select 是（相对）容易的。

但是，很难设置菜单项的样式，因为每次打开菜单并尝试检查项目时，菜单都会再次关闭。

有帮助的是（暂时）指定 menuIsOpen={true} 参数，这将使菜单保持打开状态以便于检查。

Answer 5

这是覆盖主题样式的方式：

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

class SelectComponent extends React.Component {
  componentDidMount() {}
  render() {
    const { data } = this.props;

    const options = [
      { value: "21", label: "21%" },
      { value: "9", label: "9%" },
      { value: "0", label: "0%" }
    ];

    const theme = theme => ({
      ...theme,
      colors: {
        ...theme.colors,
        primary25: "#f3f3f3",
        primary: "pink"

        // All possible overrides
        // primary: '#2684FF',
        // primary75: '#4C9AFF',
        // primary50: '#B2D4FF',
        // primary25: '#DEEBFF',

        // danger: '#DE350B',
        // dangerLight: '#FFBDAD',

        // neutral0: 'hsl(0, 0%, 100%)',
        // neutral5: 'hsl(0, 0%, 95%)',
        // neutral10: 'hsl(0, 0%, 90%)',
        // neutral20: 'hsl(0, 0%, 80%)',
        // neutral30: 'hsl(0, 0%, 70%)',
        // neutral40: 'hsl(0, 0%, 60%)',
        // neutral50: 'hsl(0, 0%, 50%)',
        // neutral60: 'hsl(0, 0%, 40%)',
        // neutral70: 'hsl(0, 0%, 30%)',
        // neutral80: 'hsl(0, 0%, 20%)',
        // neutral90: 'hsl(0, 0%, 10%)',
      }
      // Other options you can use
      // borderRadius: 4
      // baseUnit: 4,
      // controlHeight: 38
      // menuGutter: baseUnit * 2
    });

    return (
      <Select
        className="select"
        defaultValue={options[0]}
        options={options}
        theme={theme}
      />
    );
  }
}

export default SelectComponent;

Answer 6

是正确的，让我们用在 React 中作为 props 传递的样式来设置元素的样式。

我仍然喜欢在设置元素样式时使用 Sass 或 Less，因为我在这些文件中有很多主题。这就是我传递 classNamePrefix='filter' 的原因。

<Select
  classNamePrefix='filter'
  options={this.getOptions()}
  onChange={this.handleFilterChange}
  isMulti
  menuIsOpen
/>

然后在 Sass 或 Less class 名称 filter.

中设置元素样式

.filter {
  &__menu {
    margin: 0.125rem auto;
  }

  &__option {
    background-color: white;

    &--is-focused {
      background-color: lightblue;
    }
  }

  &__group {
    padding: 0;
  }

  &__menu-portal {
    border: 1px solid darkblue;
  }
}

Answer 7

和其他参与者一样，我对如何根据数据设置不同选项的样式感到困惑。版本 1 的语法看起来很简单，我考虑使用 3 年前的旧版本！我发现文档中的示例很难理解，因为它们将数据样式与 isDisabled、isFocused、多个回调等结合起来。

最后我在 Dmitry Rogozhny 的 CodeSandBox 中找到了一个简单的例子。这是一个分支版本，更新为 React 函数式语法，代码进一步简化：https://codesandbox.io/s/react-select-css-styling-forked-mrspe

Answer 8

我认为 react-select 样式的最佳方式在下面，人们也遇到了一些 z-index 问题也解决了

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

如何设置 react-select 选项的样式

How to style react-select options

css

reactjs

react-select

反应 select v2（更新）

自定义样式

react-select v1（旧答案 - 已弃用）

Custom classNames

MenuRender