React-Select占位符初始不可见,点击箭头后才显示的问题求助
React-Select初始状态占位符不可见问题
首次使用React-Select,已找到调整宽高的样式方案,目前样式调整正常,但初始状态下占位符完全不可见,点击下拉箭头展开选项时,占位符才会显示。
我的代码:
样式定义:
const styles = { option: (provided, state) => ({ ...provided, fontWeight: state.isSelected ? "bold" : "normal", fontSize: "16px", width:'95%', minHeight: '30px', height: '30px', }), container:(provided) => ({ ...provided, width:'95%', minHeight: '30px', height: '30px', }), control:(provided, state) => ({ ...provided, width:'95%', minHeight: '35px', height: '35px', }), indicators:(provided) => ({ ...provided, width:'95%', }), valueContainer: (provided) => ({ ...provided, minHeight: '20px', height: '20px', }), indicatorsContainer: (provided) => ({ ...provided, minHeight: '35px', height: '35px', }), placeholder:(provided) => ({ ...provided, height:"20px", color: "black", }), };
组件使用:
const options = [ {"value":"standard", "label":"Sélectionnez"}, {"value":1, "label":"Quincy"}, {"value":"2", "label":"Pouilly"}] <Select placeholder="Sélectionnez" options={options} onChange={handleChangeSpe} styles={styles}/>
已尝试的解决方案:
- 修改input样式,但选中选项后无法显示内容
- 修改占位符高度
- 调整几乎所有可修改元素的高度
状态截图:
初始状态(占位符不可见):
点击箭头后(占位符显示):
内容的提问来源于stack exchange,提问作者Aliénor
相关产品推荐
相关产品推荐

