Как я могу выровнять текстовые поля, используя reactjs

Question

Я новичок в среде Material-UI, хочу отобразить содержимое, одно слева и одно справа, как показано на снимке.

Я пытался использовать карту и сетку, но не смог получить таким образом.

Я не смог растянуть сетку в соответствии с содержимым , Вот код:

   <Card>
        <CardHeader
          avatar={<Avatar aria-label="recipe">AJ</Avatar>}
          title={
            <TextField placeholder="Search" margin="normal" />

          }
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
        />
        <Divider />
        <CardContent>
          <Grid container spacing={3}>
            <Grid item xs={3} md={3}>
              <Paper className={classes.viewLeft}>hi i'm abc</Paper>
            </Grid>

            <Grid item xs={3} md={6} className={classes.viewRight}>
              <Paper>
                hi i'm abc workingqwertyuiopqwertyuiop dfgthyjklkddhwbuefh weuh
                vwetbg2ehn{" "}
              </Paper>
            </Grid>
          </Grid>
        </CardContent>
      </Card>

Вот весь код: "https://codesandbox.io/s/hopeful-dust-jk4gd"

Может кто-нибудь помочь мне в этом запросе?

Answer 1

Я думаю, вы можете легче управлять этим макетом. Обратите внимание, что у вас есть только одно сообщение в строке, это означает, что вы можете обернуть свою внутреннюю карту <Grid item xs={12}></Grid>

Вот простой компонент сообщения, который может вдохновить вас

function Message({ content, isSender }) {
  return (
    <Grid container>
      <Grid item xs={12}>
        <Card
          style={{
            backgroundColor: "#eee",
            float: isSender ? "right" : "left",
            padding: 16,
            minHeight: 40,
            width: 100,
            display: "flex",
            alignItems: "center",
            textAlign: "center"
          }}
        >
          {content}
        </Card>
      </Grid>
    </Grid>
  );
}

Тогда позже вы можете использовать его следующим образом:

<Message isSender content="Hello" />
<Message content="Hello back" />

Это приведет к следующему рисунку:

PS: этот компонент предназначен только для демонстрационных целей, он явно не готов к производству и не полностью отвечает вашим потребностям.

edit : следующие советы могут помочь вам в разработке вашего компонента:

• Добавить isFirstMessage реквизит, который, если true, добавит аватар и уменьшит радиус верхней правой границы.
• Исходя из реквизита отправителя, оставьте <Grid item xs={1}></Grid> для Аватара

edit 2 Как уже говорилось в комментариях, вы можете добавить имя и аватар сообщения, просто играя с Grid s

Наивная реализация будет такой:

<Grid container>
  <Grid style={{ paddingBottom: 8 }} item xs={12}>
    <span className={classes.authorName}>{authorName}</span>
  </Grid>
  <Grid item xs={12}>
    <span className={classes.messageContent}>{content}</span>
  </Grid>
</Grid>

Чтобы добавить аватар, вам нужно лишь дать ему небольшую часть контейнерная сетка; вот так

{!isSender && (
  <Grid className={classes.avatarContainer} item xs>
    <Avatar />
  </Grid>
)}

Совмещение обоих советов может привести к чему-то вроде этого:

Пожалуйста, найдите в этот код и флажок полный рабочий пример