固定AppBar下的内容 [英] Content beneath fixed AppBar

问题描述

可能是一个基本问题，但我在文档中找不到任何示例。使用material-ui-nextBeta.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下面，而不是被它隐藏。是不是我在什么地方遗漏了什么组件？

推荐答案

您的内容在屏幕上，但被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);

这篇关于固定AppBar下的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！