如何设置反应选择的样式

Question

为react-select组件(https://github.com/JedWatson/react-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}
/>

问题是,展开选择时的实际选项仍然是默认样式.如何定位这些样式选项？

这是我正在谈论的一个例子.我可以设置占位符的样式,但不能选择:

Answer 1

反应选择v2(更新)

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

自定义样式

使用样式prop为自定义css设置单个组件的样式.

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(旧答案 - 已弃用)

自定义classNames

您可以为组件提供自定义className prop,它将添加到基础.Select外部容器的className.内置的选项渲染器还支持自定义类名.

将自定义className作为属性添加到options数组中的对象:

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用于选项的className

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

Answer 2

@ btzr的答案是正确的,react-select使用CSS类的样式(相对)容易.

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

有什么帮助(暂时)指定menuIsOpen={true}参数,这将使菜单保持打开状态以便于检查.

Answer 3

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

当我设计元素样式时，我仍然更喜欢使用 Sass 或 Less，因为这些文件中有很多主题。这就是为什么我通过 aclassNamePrefix='filter'来代替。

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

然后在该类名称上使用 Sass 或 Less 设置元素的样式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 4

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

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

https://react-select.com/styles

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;