React Material 标签内容被转移到预期容器之外

Question

我想为我的 React 网站实现选项卡组件。我遇到了问题，我想在红色/蓝色容器中显示的内容被转移到蓝色容器的底部。我知道问题来自红色框，它是看不见的，但不知何故仍然存在，并将我的内容转移到底部。

JSX 如下所示：

        <div className='drinks'>
            <Header />
            <div className="drinks-tabs-wrapper">
                <Tabs value={tab} onChange={ (_, value) => setTab(value) }>
                    <Tab label='Drinks' style={{ color: 'white' }} />
                    <Tab label='Categories' style={{ color: 'white' }} />
                </Tabs>
                <div style={ getTabWrapperStyle('drinks') }>
                    { (!drinks || !drinkCategories) ? 
                    <CircularProgress size={ 100 } /> :
                    <div hidden={ tab !== 0 }>
                        { drinks.map(drink => (
                            <div key={ drink.id }>
                                <p>{ drink.id }</p>
                                <p>{ drink.name }</p>
                                <p>{ drink.price }</p>
                            </div>
                        ))}
                    </div> }
                </div>
                <div style={ getTabWrapperStyle('drinkCategories') }>
                { drinkCategories &&
                    <div hidden={ tab !== 1 }>
                        { drinkCategories.map(drinkCategory => (
                            <div key={ drinkCategory.id }>
                                <p>{ drinkCategory.name }</p>
                            </div>
                        ))}
                    </div> }
                </div>
            </div>
        </div>

drinks 和 drinkCategories 来自 API（因此是 Loader）

获取 CSS 的 getTabWrapperStyle 如下所示：

    const getTabWrapperStyle = (tabName) => {
        if (tabName === 'drinks') {
            if (tab !== 0) {
                return {
                    "display": "flex",
                    "alignItems": "center",
                    "justifyContent": "center",
                    "height": "calc(100% - 50px)",
                    "background": "blue",
                    "overflowY": "scroll"
                }
            } else if (tab !== 1) {
                return {
                    "height": 0
                }
            }
        } else if (tabName === 'drinkCategories') {
            if (tab !== 0) {
                return {
                    "height": 0
                }
            } else if (tab !== 1) {
                return {
                    "display": "flex",
                    "alignItems": "center",
                    "justifyContent": "center",
                    "height": "calc(100% - 50px)",
                    "background": "red",
                    "overflowY": "scroll"
                }
            }
        }
    }

红色框看起来一切正常，但蓝色框不起作用。移动看起来如下所示：

[1

Answer 1

原来问题是显示：蓝色/红色容器中的弹性 css。只需删除它并在没有 flex 属性的情况下工作，一切正常。

React Material 标签内容被转移到预期容器之外

React Material Tabs content gets shifted to the out of the expected Container

html

css

reactjs

material-ui

react-material