Material UI Paper 组件不适合父组件高度

Question

Material UI Paper 组件不适合父组件高度

Sli*_*lim 5 javascript css reactjs material-ui

我使用Paper包含一个Card组件的组件，并且我希望它的高度适合整个页面屏幕。我尝试重现该问题并使其变得简单，因此使用以下代码：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";

const useStyles = makeStyles({
    paper: {
      width: "100%",
      height: "100%",
      backgroundColor: 'grey'
    },
    card: {
      backgroundColor: 'blue'
    }
  });

export default function SimplePaper() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.paper}>
        <Card className={classes.card}>
          <CardContent>Hello World</CardContent>
        </Card>
      </Paper>
    </div>
  );
}

Run Code Online (Sandbox Code Playgroud)

在这种情况下，纸张高度等于卡片高度，并且不适合全屏，您可以在此处检查代码。

当我使用min-height: 100vh纸张高度适合全屏时，但它添加了滚动条。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";

const useStyles = makeStyles({
    paper: {
      width: "100%",
      minHeight: "100vh",
      backgroundColor: 'grey'
    },
    card: {
      backgroundColor: 'blue'
    }
  });

export default function SimplePaper() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.paper}>
        <Card className={classes.card}>
          <CardContent>Hello World</CardContent>
        </Card>
      </Paper>
    </div>
  );
}

Run Code Online (Sandbox Code Playgroud)

检查这里的例子。我发现一个关于此链接上描述的问题的问题，但排名最高的答案并不能解决问题。

对于这个问题有什么建议或解决方案吗？

Answer 1

小智 6

我在这里修改了您的示例代码。

大多数浏览器默认<body>包含边距，因此，添加<CssBaseline />可以重置样式（并且还添加了默认的 Material UI 样式）。

在最顶部添加填充和高度 100vh<div>可以使窗口之间具有完整的高度。

希望这能有所帮助~

归档时间：	5 年，11 月前
查看次数：	26863 次
最近记录：	4 年，4 月前