[英]How can I remove the bar in the react-select?
我正在嘗試改進我的反應選擇 UI。 我在網上做了一些研究,但我仍然不知道如何刪除 select 中的欄。
我可以設置控件組件的樣式以刪除欄嗎? 如何?
import React from 'react';
import chroma from 'chroma-js';
import { colourOptions } from './docs/data';
import Select from 'react-select';
const dot = (color = '#ccc') => ({
alignItems: 'center',
display: 'flex',
':before': {
backgroundColor: color,
borderRadius: 10,
content: ' ',
display: 'block',
marginRight: 8,
height: 10,
width: 10,
},
});
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? null
: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null,
color: isDisabled
? '#ccc'
: isSelected
? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
};
},
input: styles => ({ ...styles, ...dot() }),
placeholder: styles => ({ ...styles, ...dot() }),
singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};
export default () => (
<Select
defaultValue={colourOptions[2]}
label="Single select"
options={colourOptions}
styles={colourStyles}
/>
);
react-select允許我們通過執行來控制組件
components={{
IndicatorSeparator: () => null
}}
例如:
<Select
id="search-commodity"
options={comodityOptions}
components={{
IndicatorSeparator: () => null
}}
/>
您要設置樣式的組件是indicatorSeparator
。 例如,將其添加到您的樣式:
indicatorSeparator: (styles) => ({display:'none'})
我是怎么發現的? 我將classNamePrefix添加到react-select屬性中,然后使用檢查器查看元素的類名是什么。
import Select from "react-select";
<Select
styles={{
indicatorSeparator: () => ({ display: "none" }),
}}
/>
您可以使用styles道具隱藏指示器分隔符。 意識到! 不是IndicatorSeparator
而是indicatorSeparator
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.