Question

可能是一个基本问题，但我在文档中找不到任何示例。使用mui.Paper beta.30 。我有以下内容：

import pygal
from die import Die

# Create two D6 dice
die_1 = Die()
die_2 = Die()

# Make some results and store in a list.
results = []
for roll_num in range(1000):
    result = die_1.roll() + die_2.roll()
    results.append(result)

# Analyze the results.
frequencies = []
max_result = die_1.num_sides + die_2.num_sides
for value in range(2, max_result+1):
    frequency = results.count(value)
    frequencies.append(frequency)

# Visualize the results.
hist = pygal.Bar()
hist.force_uri_protocol = 'http'

hist.title = "Results of rolling two D6 dice 1000 times."
hist.x_labels = ['2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
hist.x_title = "Result"
hist.y_title = "Frequency of Result"

hist.add('D6 + D6', frequencies)
hist.render_to_file('die_visual.svg')

我希望pip install -U --force-reinstall numpy内容在 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的{{1}}尺寸，以便将您的内容移到屏幕上。

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

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使用position="sticky"而不是position="fixed"。

Answer 3

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

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

<Toolbar /> // <- does the trick

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

Answer 4

Elevate App Bar example仅添加一个空的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>
  );
}

Answer 5

这些解决方案（完全）都不适合我...

我的AppBar的大小在移动设备的窗口调整大小（960像素）时发生变化。 theme.mixins.toolbar解决方案返回静态主题高度，该高度在我的AppBar下方留有多余的空间。 position="sticky"解决方案使AppBar内联，如果您不在页面顶部，则使其无法访问。

这是我的解决方案：

export default function () {
  const nav = useRef();
  const [navHeight, setNavHeight] = useState(0);
  const [isMobile, setMobile] = useState(false);

  useLayoutEffect(() => {
    nav.current && setNavHeight(nav.current.clientHeight);
  }, [isMobile]);

  const checkIsMobile = () => (window.innerWidth < 960 ? true : false);
  if (typeof window !== 'undefined') {
    window.onresize = () => isMobile !== checkIsMobile && setMobile(checkIsMobile);
  } 

  return (
    <>
      <AppBar ref={nav}></AppBar>
      <div style={{ paddingTop: `${navHeight}px`}} />
    </>
  )
}

window.innerWidth超过阈值960px时，useLayoutEffect钩子触发，触发setNavHeight，该值用于在<div/>下方的虚拟<AppBar/>上设置paddingTop。

自2020年6月31日起，此解决方案可与Material-UI 4.11.0和Next.js 9.4.4一起使用。

固定AppBar下的内容

5 个答案: