为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}
/>
问题是，展开选择时的实际选项仍保持默认样式。如何定位这些样式选项？
【问题讨论】：
标签： css reactjs react-select
这个新版本引入了新的styles-api 和其他一些重大变化。
使用样式属性使用自定义 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 中。内置的 Options 渲染器也支持自定义类名。
将您的自定义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 的回答是正确的，使用 CSS 类设置 react-select 的样式（相对）容易。
但是，很难设置菜单项的样式，因为每次打开菜单并尝试检查项目时，菜单都会再次关闭。
有助于（临时）指定menuIsOpen={true} 参数，这将保持菜单打开以便于检查。
【讨论】：
addEventListener('click', ()=>{debugger})
const CustomStyle = {
option: (base, state) => ({
...base,
backgroundColor: state.isSelected ? {Color1} : {Color2},
})
}
<Select styles={customStyle} >
对此有更多选择。查看样式文档。
【讨论】：
Accepted answer by btzr 是正确的，让我们使用 React 中作为 props 传递的样式来设置元素的样式。
当我为元素设置样式时，我仍然更喜欢使用 Sass 或 Less，因为我在这些文件中有很多主题。这就是为什么我改为传递classNamePrefix='filter'。
<Select
classNamePrefix='filter'
options={this.getOptions()}
onChange={this.handleFilterChange}
isMulti
menuIsOpen
/>
然后在类名filter 上为 Sass 或 Less 中的元素设置样式。
.filter {
&__menu {
margin: 0.125rem auto;
}
&__option {
background-color: white;
&--is-focused {
background-color: lightblue;
}
}
&__group {
padding: 0;
}
&__menu-portal {
border: 1px solid darkblue;
}
}
【讨论】：
&__menu-portal 可用于设置下拉门户的样式。
__menu-portal 似乎对我不起作用。直接在__menu 上设置样式有效。此外，由于某些奇怪的原因，设置 backbround-color:<color> 不起作用。唯一有效的是设置线性渐变，background: linear-gradient(to right, var(--searchbar-color) 50%, var(--panel-color) 100%);。
__menu 属性上添加!important 有效。
我得到了使用风格：
const options = [
{label: "one", value: 1, style: { color: 'red' }},
{label: "two", value: 2, style: { color: 'blue' }}
// more options...
];
...
<Select options={options} />
【讨论】：
这是您覆盖主题样式的方式：
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;
【讨论】：
和其他参与者一样，我对如何从数据中设置不同选项的样式感到困惑。版本 1 的语法看起来很简单，我考虑使用 3 年前的版本！我发现文档中的示例很难理解，因为它们将数据样式与 isDisabled、isFocused、多个回调等结合在一起。
最后，我在 Dmitry Rogozhny 的 CodeSandBox 中找到了一个简单的示例。这是一个分支版本，更新为 React 函数式语法，代码进一步简化：https://codesandbox.io/s/react-select-css-styling-forked-mrspe
【讨论】：
我认为样式化 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}
/>
【讨论】：