在flex容器中进行反应选择 [英] react-select in flex container

问题描述

如何进行反应选择以尊重柔性版式?以下内容均无效.

How can I make react-select to respect flex layout? Nothing of the below worked.

 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组件灵活，您需要在容器上应用flex:1道具，如下所示:

To make your react-select component flex you need to apply flex:1 props on the container like this:

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

<Select styles={styles} />

这篇关于在flex容器中进行反应选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！