Question

我有React App，我需要一直将页脚放在底部。

我根据屏幕尺寸重新排列屏幕上的组件，即使用媒体查询将display从flex更改为block。

我已经将<BottomNavigation />组件包括在App.js文件中，就在这样的Routes下方。

<div>
        <NavBar/>
        <main className={style.container}>
        <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/data" component={Data} />
            <Route exact path="/productfeed" component={ProductFeed} />
            <Route exact path="/demo" component={Demo} />
            <Route exact path="/userAction" component={UserAction} />
            <Route exact path="/discoveryPath" component={DiscoveryPath} />
            <Route exact path="/conversionAnalysis" component={ConversionAnalysis} />
            <Route exact path="/performanceMonitor" component={PerformanceMonitor} />
            <Route exact path="/data" component={Data} />
            <Route exact path="/demo" component={Demo} />
            <Route exact path="/productFeed" component={ProductFeed} />
            <Route exact path="/logout" component={Logout} />
        </Switch>
        <BottomNavigation className={style.footer} showlabel="">
                <p style={{width: '100%', textAlign: 'center'}}> My DashBoard </p>
        </BottomNavigation>

我将以下CSS用于footer / BottomNavigation组件，例如其他答案中建议使用position:fixed;，bottom:0;和clear: both;，但是当我调整窗口大小并触发媒体查询时，媒体查询会重新排列屏幕上的组件。 <BottomNavigation />并没有完全消失，它停留在组件之间。

当我使用<BottomNavigation />时，也会在控制台中收到警告像这样

警告：React无法识别DOM上的showLabel道具元件。如果您有意让它作为自定义项出现在DOM中属性，则将其拼写为小写showlabel。如果你意外地从父组件传递了它，将其从DOM中删除元素。

任何帮助将不胜感激。

Answer 1

尝试

position：粘性;
底部：0;

在我的情况下有效。

Material UI中的BottomNavigation组件不会停留在屏幕调整大小的底部

1 个答案: