如何设置反应选择样式 [英] How to style react-select options

问题描述

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

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

我可以将选择本身定位为目标，例如:

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:

推荐答案

反应选择v2(更新)

此新版本引入了新的styles-api和其他一些主要更改.

react select v2 (update)

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

使用样式属性通过自定义CSS设置各个组件的样式.

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

现在，该项目的网站上提供了更好的文档和更清晰的示例:

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

您可以为组件提供一个自定义的className属性，该属性将添加到基本容器中.为外部容器选择className.内置的Options渲染器还支持自定义className.

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.

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

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

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

optionClassName String用于选项的className

optionClassName String The className that gets used for options

示例:反应选择/master/src/utils/defaultMenuRenderer.js

这篇关于如何设置反应选择样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！