React-bootstrap Tabs 在交互时缩小标签内容

Question

我有一个 Tabs 组件，它应该呈现一个容器。现在，在与内部容器中的 react-select 表单交互时，容器本身会收缩，而不是将其大小保持在 100% 宽度。我怎样才能做到这一点？

这是错误的行为：

这是渲染方法：

  <BackgroundContainer>
    <Container alignItems={'center'} flexDirection={'column'} width={'60%'}>
      <Tabs
        fill
        style={tabsStyle}
        id={'modeTabs'}
        transition={false}
        activeKey={this.state.mode}
        onSelect={k => {
          this.setState({mode: k});
        }}
      >
        <Tab eventKey={'schieber'} title={'Schieber'} style={tabStyle}>
          <TabWrapper>
            <SchieberCreator/>
          </TabWrapper>
        </Tab>
        <Tab eventKey={'coiffeur'} title={'Coiffeur'} style={tabStyle} disabled>
          <CoiffeurCreator/>
        </Tab>
        <Tab eventKey={'bieter'} title={'Bieter'} style={tabStyle} disabled>
          <BieterCreator/>
        </Tab>
        <Tab eventKey={'sidi'} title={'2er Sidi'} style={tabStyle} disabled>
          <SidiCreator/>
        </Tab>
      </Tabs>
    </Container>
  </BackgroundContainer>

样式和包装器组件：

const tabsStyle = {
  backgroundColor: '#7F8385',
  borderTopRightRadius: '5px',
  borderTopLeftRadius: '5px',
  width: '94%',
  margin: 0,
  padding: 0,
};

const tabStyle = {
  width: '100%',
};

const TabWrapper = styled('div')({
  flex: 1,
  width: '100%',
  alignItems: 'stretch'
});

Answer 1

使包装达到 align-items: stretch 的效果。此外，为了使选项卡栏居中，我没有像以前那样使用 align-items: center，而是为 tabsStyle.

设置了 margin: 0 auto

React-bootstrap Tabs 在交互时缩小标签内容

React-bootstrap Tabs shrinks tab content on interaction

tabs

reactjs

react-bootstrap

react-select