reactjs - 如何根据reactjs中显示的内容拉伸(stretch)卡片？

Question

我是 Material UI 框架的新手，我想相应地拉伸(stretch)内容中显示的网格。我做不到。有人可以帮我吗？

<Card>
        <CardHeader
          avatar={<Avatar aria-label="recipe">S</Avatar>}
          title={
            <>
              <InputBase placeholder="Search Google Maps" margin="normal" />
              <IconButton type="submit" aria-label="search">
                <SearchIcon />
              </IconButton>
            </>
          }
        />
        <Divider />
        <CardContent
          style={{ overflow: "scroll" }}
          className={classes.contentHeight}
          id="chatList"
        >
          <div>
            <Message isSender content="Hello" />
            {this.state.data.map(item => {
              if (item.isSender) {
                return (
                  <Message isSender name="Sanjana" content={item.content} />
                );
              }
              return <Message name="Sanjana" content={item.content} />;
            })}
          </div>
        </CardContent>
        <Divider />
        <CardActions>
          <Paper className={classes.contentPaper}>
            <Input
              margin="dense"
              className={classes.input}
              placeholder="Enter a Message"
              disableUnderline
            />
          </Paper>
        </CardActions>
      </Card>

有人可以帮我解决这个问题吗？

提前致谢!

Answer 1

要使内容拉伸(stretch)全宽度，您可以使用 width: "fit-content" 并将 width 值 100 分配给 minWidth: 100 .

所以你的卡片看起来像，

        <Card
          style={{
            backgroundColor: "#eee",
            float: isSender ? "right" : "left",
            padding: 16,
            diaplay: "block",
            minHeight: 40,
            width: "fit-content",
            minWidth: 100,
            display: "flex",
            alignItems: "center",
            textAlign: "center"
          }}
        >

要使内容在卡片内左对齐，您可以将样式指定给Grid，例如，

 <Grid style={{ paddingBottom: 8, textAlign: "left" }} item xs={12}>
        <span>{name}</span>
 </Grid>

Forked sandbox