弹性容器中的反应选择答案

【问题标题】：react-select in flex container弹性容器中的反应选择
【发布时间】：2023-04-07 20:51:01
【问题描述】：

如何让 react-select 尊重 flex 布局？以下没有任何效果。

 const Container = styled('div')`
   width: 100%;
   height: 100%;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   align-items: baseline;
 `;

const selectStyles = {
  input: base => ({
    minWidth: 200,
    flex: 1,

<Container>
<Select
  style={{ flex: 1 }}
  styles={selectStyles}

【问题讨论】：

好像React select不支持style或者styles，可能需要用getStyles props代替

标签： javascript reactjs flexbox react-select

【解决方案1】：

要使您的 react-select 组件具有弹性，您需要在容器上应用 flex:1 道具，如下所示：

const styles = {
  container: base => ({
    ...base,
    flex: 1
  })
};

<Select styles={styles} />

【讨论】：