title: BottomNavigation component from Material UI doesn't stay at the bottom on screen resize
body: <p>I have react app where I need to put a footer that stays at the bottom, all the time.</p>
  
  <p>I rearrange the components on the screen based on screen size i.e I change the <code>display</code> from <code>flex</code> to <code>block</code> using media queries.</p>
  
  <p>I have included the <code>&lt;BottomNavigation /&gt;</code> component in the App.js file, just below the Routes like this.</p>
  
  <pre><code>&lt;div&gt;
          &lt;NavBar/&gt;
          &lt;main className={style.container}&gt;
          &lt;Switch&gt;
              &lt;Route exact path="/" component={Dashboard} /&gt;
              &lt;Route exact path="/data" component={Data} /&gt;
              &lt;Route exact path="/productfeed" component={ProductFeed} /&gt;
              &lt;Route exact path="/demo" component={Demo} /&gt;
              &lt;Route exact path="/userAction" component={UserAction} /&gt;
              &lt;Route exact path="/discoveryPath" component={DiscoveryPath} /&gt;
              &lt;Route exact path="/conversionAnalysis" component={ConversionAnalysis} /&gt;
              &lt;Route exact path="/performanceMonitor" component={PerformanceMonitor} /&gt;
              &lt;Route exact path="/data" component={Data} /&gt;
              &lt;Route exact path="/demo" component={Demo} /&gt;
              &lt;Route exact path="/productFeed" component={ProductFeed} /&gt;
              &lt;Route exact path="/logout" component={Logout} /&gt;
          &lt;/Switch&gt;
          &lt;BottomNavigation className={style.footer} showlabel=""&gt;
                  &lt;p style={{width: '100%', textAlign: 'center'}}&gt; My DashBoard &lt;/p&gt;
          &lt;/BottomNavigation&gt;
  </code></pre>
  
  <p></p>
  
  <p>I used the following CSS for the footer/BottomNavigation component such as
   <code>position:fixed;</code>, <code>bottom:0;</code> and <code>clear: both;</code> as suggested in other answers but when I resize the window and trigger the media query which re-arranges the components on the screen. The <code>&lt;BottomNavigation /&gt;</code> doesn't go all the way down, it stays in-between the components. </p>
  
  <p>I also get a warning in the console when I use the <code>&lt;BottomNavigation /&gt;</code>
  like this</p>
  
  <blockquote>
    <p>Warning: React does not recognize the <code>showLabel</code> prop on a DOM
    element. If you intentionally want it to appear in the DOM as a custom
    attribute, spell it as lowercase <code>showlabel</code> instead. If you
    accidentally passed it from a parent component, remove it from the DOM
    element.</p>
  </blockquote>
  
  <p>Any help will be appreciated.</p>