设置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}
/>
问题是，展开选择时的实际选项保持默认样式。我如何才能针对这些选项进行样式设置？
这是我正在谈论的一个例子。我可以设置占位符的样式，但不能设置选项：
这个新版本引入了一个新的styles-api和一些其他的重大变化。
使用样式props使用自定义 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
您可以为组件提供自定义 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} />
menuRenderer 属性可用于覆盖默认的下拉选项列表。
optionClassName
String用于选项的类名
@btzr 的回答是正确的，并且react-select使用 CSS 类进行样式设置（相对）容易。
但是，很难为菜单项设置样式，因为每次打开菜单并尝试检查项目时，菜单都会再次关闭。
有帮助的是（临时）指定menuIsOpen={true}参数，这将使菜单保持打开状态以便于检查。
const CustomStyle = {
option: (base, state) => ({
...base,
backgroundColor: state.isSelected ? {Color1} : {Color2},
})
}
<Select styles={customStyle} >
对此有更多选择。查看样式文档。
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;
}
}