我在努力做到下圖這樣。現在，我的圖片在上面，而文字在下面。我想實現的文本就在圖像的右邊。

請檢查這個代碼沙盒鏈接點擊這里

密碼

const drawer = (
    <div>
      <h2 className={classes.headerTitle}>Login</h2>
      <Divider />
      <div className={classes.headerIcon}>
        <AccountCircleIcon fontSize="large" />
      </div>
      <h5 className={classes.headerName}>Bake</h5>
      <p className={classes.headerRole}>User</p>
      <Divider />
    </div>
  );

添加顯示:& quotflex & quot對孩子們來說沒什么用。我所做的是在你的圖標、名字和角色周圍添加了一個包裝類，顯示為:& quotflex & quot，靈活方向:& quotrow & quotjustify content:& quot；中心& quot和align items:& quot；中心& quot屬性。包裝器然后做的是把所有的divs & quot在& quot它排成一行，像是:

<div className="classes.wrapper">
  <div>This one is to the left</div>
  <div>This one is to the right</div>
</div>

但是，如果我將另外兩個div放在右邊的div下面，它們將堆疊在一起，因為flexDirection屬性被設置為wrapper下所有子級的row，而不是它們的子級的row。

<div className="classes.wrapper">
  <div>This one is to the left</div>
  <div>
       <div>This one will be to the right on top</div>
       <div>This one will be to the right under</div>
  </div>
</div>

我還刪除了一些其他的東西，但這里是代碼:

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";

const useStyles = makeStyles(theme => ({
  wrapper: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    margin: "0.5rem"
  },
  innerWrapper: {
    display: "flex",
    flexDirection: "column",
    alignItems: "baseline",
    marginLeft: "0.5rem"
  },
  headerTitle: {
    fontSize: "1.3rem",
    cursor: "pointer"
  },
  headerName: {
    margin: "0",
    fontStyle: "bold",
    fontSize: "1rem"
  },
  headerRole: {
    margin: "0",
    fontSize: "0.7rem"
  },
  iconButtons: {
    marginLeft: "auto"
  }
}));

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

  const drawer = (
    <>
      <h2 className={classes.headerTitle}>Login</h2>
      <Divider />
      <div className={classes.wrapper}>
        {" "}
        <div className={classes.headerIcon}>
          {" "}
          <AccountCircleIcon fontSize="large" />
        </div>
        <div className={classes.innerWrapper}>
          <h5 className={classes.headerName}>Bake</h5>
          <p className={classes.headerRole}>User</p>
        </div>
        <Divider />
      </div>
    </>
  );

  return (
    <nav className={classes.drawer}>
      <Hidden lgUp implementation="css">
        <Drawer
          variant="temporary"
          anchor={"left"}
          classes={{
            paper: classes.drawerPaper
          }}
          ModalProps={{
            keepMounted: true
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <Hidden implementation="css">
        <Drawer
          classes={{
            paper: classes.drawerPaper
          }}
          variant="permanent"
          open
        >
          {drawer}
        </Drawer>
      </Hidden>
    </nav>
  );
}

有關如何在CSS中使用flexbox的更多信息，請查看本指南。

我是這樣做的。我已經調整了圖標右邊的文字。 您可以進一步設計樣式:

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import "./styles.css";

const headerStyles = {
  display: "flex",
  justifyContent: "center"
};

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex"
  },
  headerTitle: {
    ...headerStyles,
    fontSize: "1.3rem",
    cursor: "pointer"
  },
  headerIcon: {
    ...headerStyles,
    marginTop: "1rem"
  },
  headerName: {
    ...headerStyles,
    marginTop: "0.2rem"
  },
  headerRole: {
    ...headerStyles,
    marginTop: "-0.8rem",
    marginBottom: "1rem"
  },
  iconButtons: {
    marginLeft: "auto"
  },
  userName: {
    display: "flex",
    flexDirection: "row"
  }
}));

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

  const drawer = (
    <div>
      <h2 className={classes.headerTitle}>Login</h2>
      <Divider />
      <div className={classes.userName}>
        <div className={classes.headerIcon}>
          <AccountCircleIcon fontSize="large" />
        </div>
        <div>
          <h5 className={classes.headerName}>Bake</h5>
          <p className={classes.headerRole}>User</p>
        </div>
      </div>
      <Divider />
    </div>
  );

  return (
    <nav className={classes.drawer}>
      <Hidden lgUp implementation="css">
        <Drawer
          variant="temporary"
          anchor={"left"}
          classes={{
            paper: classes.drawerPaper
          }}
          ModalProps={{
            keepMounted: true
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <Hidden implementation="css">
        <Drawer
          classes={{
            paper: classes.drawerPaper
          }}
          variant="permanent"
          open
        >
          {drawer}
        </Drawer>
      </Hidden>
    </nav>
  );
}