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

Question

提问by tomtom

What's the best way to style a react-selectcomponent's (https://github.com/JedWatson/react-select) options?

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

I can target the select itself just fine, with something like:

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

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

The problem is, the actual options when the select is expanded remain styled as the default. How can I target these options for styling?

问题是，展开选择时的实际选项保持默认样式。我如何针对这些选项设置样式？

Here is an example of what I'm talking about. I can style the placeholder, but not the options:

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

Answer 1

回答by btzr

react select v2 (update)

反应选择 v2（更新）

This new version introduces a new styles-apiand some other major changes.

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

Custom Styles

自定义样式

Style individual components with custom css using the styles 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}
  />
);

Now there is better documentation and more clear examples on the project's website:

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

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 ( old answer - deprecated )

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

Custom classNames

自定义类名

You can provide a custom className prop to the component, which will be added to the base .Select className for the outer container. The built-in Options renderer also support custom classNames.

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

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

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

MenuRender

菜单渲染

The menuRenderer property can be used to override the default drop-down list of options.

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

optionClassName StringThe className that gets used for options

optionClassNameString用于选项的类名

Example: react-select/master/src/utils/defaultMenuRenderer.js

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

Answer 2

回答by johndodo

@btzr's answer is correct, and styling react-selectusing CSS classes is (relatively) easy.

@btzr 的答案是正确的，并且react-select使用 CSS 类进行样式设置（相对）容易。

However, it is difficult to style menu items because every time you open the menu and try to inspect the items, the menu closes again.

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

What helps is to (temporarily) specify menuIsOpen={true}parameter, which will keep menu open for easier inspection.

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

Answer 3

回答by Alessander Fran?a

I got use style:

我得到了使用风格：

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

Answer 4

回答by harsimarriar96

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

There are more options for this. Have a look at the documentation for styling.

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

https://react-select.com/styles

Answer 5

回答by Calsal

Accepted answer by btzris correct and let's us style the elements with styles passed as props in React.

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

I still prefer using Sass or Less when I style my elements because I have a lot of theming in those files. That's why I pass a classNamePrefix='filter'instead.

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

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

And then style the elements in Sass or Less on that class name filter.

然后在该类名上设置 Sass 或 Less 中的元素样式filter。

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

  &__option {
    background-color: white;

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

  &__group {
    padding: 0;
  }
}

Answer 6

回答by Stef Kors

This is how you override the theme styles:

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

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;