You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.26 21:45:07