我想使用反应选择,但在将页面背景颜色从白色更改为自定义后遇到了一系列问题。 (这些问题在白色背景上并不像在反应选择的 github 页面上那么明显)
我通过 styles 属性执行上述操作,因为 className 属性无法正常工作。
这是 styles 道具。
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
option: (styles) => {
return {
backgroundColor: '#023950',
color: 'white'
};
},
singleValue: styles => ({ ...styles, color: 'white' }),
};
以下是问题列表以及是否有人可以帮助解决这些问题。请参阅附图。
- Notice the gap between the dropdown and the options (when you click on the dropdown to open the options)
- 如果你看到这里,http://jedwatson.github.io/react-select/,没有间隙,但也看不到源代码。单击源链接会出现 404。
- 所有演示都在这里,https://react-select.com/styles,有这个间隙问题。
- 顶部和底部有一个白色间隙(在选项本身内)。这与第 1 点中提到的下拉菜单中的间隙不同。该间隙是透明的,显示后面的内容。这个是白色的。
- 长文本导致选项导致整个选项框出现奇怪的空白问题。有没有办法剪辑文本并将其变成省略号,而不是使选项框更宽并具有水平滚动?
- 与上述问题相关。如何关闭水平滚动。想要文字剪辑。
- 关于使用 className prop 的问题,该类确实得到了应用。但仅适用于最顶层的 1 个 div。它不适用于子 div,它最终在背景颜色中保持白色。
反应选择样式问题
在下面的活生生的例子你会找到不同观点的答案。
您提到的前 4 点可以通过编辑 style-in-JS 来解决,如下所示:
const customStyles = {
control: (base, state) => ({
...base,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
// beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
hyphens: "auto",
// kill the gap
marginTop: 0,
textAlign: "left",
// prevent menu to scroll y
wordWrap: "break-word"
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
对于最后一个,因为选择应该通过 JS 使用className
如前所述,props 只会在外部容器上放置一个类here。如果您确实想要,您仍然可以在组件前面添加前缀classNamePrefix
但它对你的造型并没有真正的帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)