如何设置反应选择选项的样式
Posted
技术标签:
【中文标题】如何设置反应选择选项的样式【英文标题】：How to style react-select options 【发布时间】：2017-12-30 16:24:59 【问题描述】：为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
/>
问题是，展开选择时的实际选项仍保持默认样式。如何定位这些样式选项？
这是我所说的一个例子。我可以设置占位符的样式，但不能设置选项：
【问题讨论】：
【参考方案1】：反应选择 v2（更新）
这个新版本引入了新的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
react-select v1（旧答案 - 已弃用）
Custom classNames
您可以为组件提供自定义 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 />
MenuRender
menuRenderer 属性可用于覆盖默认下拉选项列表。
optionClassName
String用于选项的类名
示例：react-select/master/src/utils/defaultMenuRenderer.js
【讨论】：
感谢您的解决方案。它使我免于寻找解决方案的几个小时：D。它奏效了。 链接已修复！ :) 什么是色度？为什么不添加导入？请给出完整的答案！ 嘿@btzr，你知道关于设置特定选项的样式吗，比如最后一个选项文本应该是粗体，搜索了几个小时，.basic-single div:last-child 字体粗细：400； 对我不起作用，它正在申请所有选项。提前致谢【参考方案2】：@btzr 的回答是正确的，使用 CSS 类设置 react-select 的样式（相对）容易。
但是，很难设置菜单项的样式，因为每次打开菜单并尝试检查项目时，菜单都会再次关闭。
有助于（临时）指定menuIsOpen=true 参数，这将保持菜单打开以便于检查。
【讨论】：
这非常有用！ 好的，谢谢。这正是我一直在寻找的。超细粒度控制。使用前缀并保持菜单打开是定位正确元素和状态的关键。完美！ 你拯救了我的一天！谢谢！即使您在开发人员控制台中单击，我也无法理解组件如何检测到单击，因为它不是 DOM 在不更改代码的情况下进行检查的另一种解决方案是在控制台中添加带有调试器语句的单击侦听器。打开菜单后它将停止执行。它有缺点，但快速且不引人注目addEventListener('click', ()=>debugger)
另一种选择是删除浏览器开发工具中的“模糊”事件。这样菜单可以展开并检查它【参考方案3】：
const CustomStyle =
option: (base, state) => (
...base,
backgroundColor: state.isSelected ? Color1 : Color2,
)
<Select styles=customStyle >
对此有更多选择。查看样式文档。
https://react-select.com/styles
【讨论】：
【参考方案4】：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;
【讨论】：
对于任何想要这样做的人，我不得不为我的所有属性使用 !important 关键字，不知道为什么&__menu-portal 可用于设置下拉门户的样式。
__menu-portal 似乎对我不起作用。直接在__menu 上设置样式有效。此外，由于某些奇怪的原因，设置 backbround-color:<color> 不起作用。唯一有效的是设置线性渐变，background: linear-gradient(to right, var(--searchbar-color) 50%, var(--panel-color) 100%);。
或者，@cosmichero2025 建议在__menu 属性上添加!important 有效。
您需要将 !important 添加到您自己的类中的所有自定义属性中，因为原始属性仍然在自定义属性之前应用。它应该是另一种方式。【参考方案5】：
我得到了使用风格：
const options = [
label: "one", value: 1, style: color: 'red' ,
label: "two", value: 2, style: color: 'blue'
// more options...
];
...
<Select options=options />
【讨论】：
嘿，这行不通。也许是因为我正在使用 react-select 2。知道如何实现这一点吗？ @Mumfordwiz 我在 CodeSandBox 中发布了一个示例：codesandbox.io/s/react-select-css-styling-forked-mrspe?file=/…【参考方案6】：这是您覆盖主题样式的方式：
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;
【讨论】：
【参考方案7】：和其他参与者一样，我对如何从数据中设置不同选项的样式感到困惑。版本 1 的语法看起来很简单，我考虑使用 3 年前的版本！我发现文档中的示例很难理解，因为它们将数据样式与 isDisabled、isFocused、多个回调等结合在一起。
最后，我在 Dmitry Rogozhny 的 CodeSandBox 中找到了一个简单的示例。这是一个分支版本，更新为 React 函数式语法，代码进一步简化：https://codesandbox.io/s/react-select-css-styling-forked-mrspe
【讨论】：
【参考方案8】：我认为样式化 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
/>
【讨论】：
以上是关于如何设置反应选择选项的样式的主要内容，如果未能解决你的问题，请参考以下文章