Material-ui: [AppBar] Sticky

Created on 27 Apr 2017 · 6Comments · Source: mui-org/material-ui

It would be cool if version 1 supports sticky app bar, like this one:

https://www.muicss.com/docs/v1/example-layouts/blog

AppBar

Source

StokeMasterJack

Most helpful comment

I'm sure it _is_ a css thing. But that does not mean it shouldn't be a feature.

I just created an entire web app using material-ui and it looks amazing. And I barely used any css. That's because material-ui does all of the css for me. One of the defining things about web ui components (in my mind) is the encapsulation of the CSS.

So the fact that something is a "css thing" doesn't mean it shouldn't be a feature of material-ui.

Secondly, I don't think it's as simple adding position: "fixed". See this discussion for details:

https://github.com/callemall/material-ui/issues/1792#issuecomment-145718205

StokeMasterJack on 27 Apr 2017

👍10

All 6 comments

This is not a feature, its rather a css thing.

This creates exactly the same behavior as proposed by setting the AppBar style to position: fixed.

import React, { Component } from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>

        <div>
          <AppBar style={{ position: "fixed" }} />
          <div style={{ paddingTop: 64 }}>content</div>
        </div>

      </MuiThemeProvider>
    );
  }
}

export default App;