固定AppBar下的内容

Question

可能是一个基本问题,但我在文档中找不到任何示例.使用material-ui-next beta.30.我有以下内容:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as mui from 'material-ui';
import 'typeface-roboto';

function App() {
  return (
    <div>
      <mui.Reboot />
      <mui.AppBar color="primary" position="fixed">
        <mui.Toolbar>
          <mui.Typography color="inherit" type="title">
            My Title
          </mui.Typography>
        </mui.Toolbar>
      </mui.AppBar>
      <mui.Paper>
        My Content
      </mui.Paper>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

而我想要的mui.Paper内容出现下面的AppBar,而不是它隐藏.是否有某个组件我在某处丢失？

Answer 1

您的内容在屏幕上,但被屏幕覆盖AppBar.您可以使用theme.mixins.toolbar加载有关应用栏高度的信息并相应地转移内容:

const styles = theme => ({
  // Load app bar information from the theme
  toolbar: theme.mixins.toolbar,
});

然后创建一个div高于您的内容以相应地转移您的内容:

<Paper>
  <div className={classes.toolbar} />
    MyContent will be shifted downwards by the div above. If you remove 
    the div, your content will disappear under the app bar.
</Paper>

这里发生的是theme.mixins.toolbar将AppBar尺寸信息加载到您的样式中.然后,将该信息应用于div大小,div以便将内容向下移动到屏幕上.

这是一个完整的工作示例:

import React from 'react';
import Paper from 'material-ui/Paper';
import Reboot from 'material-ui/Reboot';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import { withStyles } from 'material-ui/styles';

const styles = (theme) => ({
  toolbar: theme.mixins.toolbar,
});

const App = (props) => {
  const { classes } = props;

  return (
    <div>
      <Reboot />
      <AppBar color="primary" position="fixed">
        <Toolbar>
          <Typography color="inherit" type="title">
            My Title
          </Typography>
        </Toolbar>
      </AppBar>
      <Paper>
        <div className={classes.toolbar} />
        MyContent will be shifted downwards by the div above. If you remove 
        the div, your content will disappear under the app bar.
      </Paper>
    </div>
  );
}

export default withStyles(styles)(App);

Answer 2

只需在AppBar之后添加一个空的Toolbar：

<AppBar>
  <Toolbar>
    ...toolbar content...
  </Toolbar>
</AppBar>

<Toolbar /> // <- does the trick

来源：https : //github.com/mui-org/material-ui/issues/16844#issuecomment-517205129

Answer 3

只需将position="sticky"其position="fixed"用于AppBar即可。

Answer 4

在提升应用程序栏例子只是增加了一个空的Toolbar：

export default function ElevateAppBar(props) {
  return (
    <React.Fragment>
      <CssBaseline />
      <ElevationScroll {...props}>
        <AppBar>
          <Toolbar>
            <Typography variant="h6">Scroll to Elevate App Bar</Typography>
          </Toolbar>
        </AppBar>
      </ElevationScroll>
      <Toolbar />  // <-- The important part.
      <Container>
        <Box my={2}>
          {[...new Array(12)]
            .map(
              () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
            )
            .join('\n')}
        </Box>
      </Container>
    </React.Fragment>
  );
}