文章/答案/技术大牛

发布

社区首页 >问答首页 >如何防止父组件内部内容溢出？

问如何防止父组件内部内容溢出？
EN

Stack Overflow用户

提问于 2020-01-15 02:38:32

回答 2查看 1.4K关注 0票数 1

我正在为我的社交媒体应用程序设计一个组件。此组件将允许用户与朋友共享他们的目标。这种设计在宽屏幕上看起来很好，但在较小的屏幕上，设计看起来像下图所示。

我最初以为解决这个问题的方法是重写排版，而不是使用响应式排版，但这并没有解决这个问题。

我认为修复的方法是让父容器增长到包含填充它的排版。我将如何使用物质用户界面来完成这个任务？我的项目的代码沙箱可以在这里找到：https://codesandbox.io/s/goal-post-design-yvvjp

该组件的代码列示如下：

import React from "react";
import "./styles.css";
import {
  Container,
  Typography,
  Paper,
  makeStyles,
  Avatar,
  Grid
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
    height: "15vh"
  }
}));

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

  return (
    <Container>
      <Paper>
        <Grid
          className={classes.paper}
          container
          direction="row"
          alignItems="center"
        >
          <Grid
            item
            container
            direction="column"
            justify="center"
            alignItems="center"
            xs={3}
          >
            <Avatar />
            <Typography variant="subtitle2">Benjamin world</Typography>
          </Grid>
          <Grid item xs={9}>
            <Typography variant="body1">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              quam lorem, malesuada sed sapien non.
            </Typography>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

reactjs

material-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-01-15 02:48:46

您可以使用以下两种方法：

paper: {
  height: "15vh",
  overflow:"auto"
}

或

paper: {
  height: "15vh",
  overflow:"hidden"
}

使纸张组件的高度根据内容的大小增长：

paper: {
      height: "auto"
}

以前:

桌面版本

iPhone 5/SE

后:

桌面版本

iPhone 5/SE

票数 3

Stack Overflow用户

发布于 2020-01-15 03:08:30

如果堆叠是你想要的，我已经改变了样式，所以它不会有固定的高度和增加填充

const useStyles = makeStyles(theme => ({
  paper: {
    padding: "15px"
  }
}));

然后将sm添加到网格中

<Grid
  item
  container
  direction="column"
  justify="center"
  alignItems="center"
  xs={12}
  sm={3}
>
  <Avatar />
  <Typography variant="subtitle2">Benjamin world</Typography>
</Grid>
<Grid item xs={12} sm={9}>
  <Typography variant="body1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
    quam lorem, malesuada sed sapien non.
  </Typography>
</Grid>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59744469

复制

相似问题

问如何防止父组件内部内容溢出？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止父组件内部内容溢出？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止父组件内部内容溢出？
EN