React Material UI中img和h4元素无法横向并排显示问题求助

问题原因 #

<h4>属于原生块级元素，默认会独占整行宽度，哪怕你给两个子元素都设置了固定宽度，也不会自动横向排列，只要给包裹它们的父容器设置flex布局就能解决。

方案1 直接调整现有样式（无额外组件引入） #

修改后的完整代码如下：

import React from "react";
import robo from "./robo.png";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  // 新增父容器样式
  headerWrap: {
    display: "flex",
    alignItems: "center", // 让图片和文字垂直居中对齐，不需要可删除
    gap: "12px" // 两个元素之间的间距，可按需调整
  },
  logo: {
    width: 100,
  },
  name: {
    width: 100,
    margin: 0 // 去掉h4默认的上下外边距，避免高度错位
  },
});
const Home = () => {
  const classes = useStyles();

  return (
    <div className={classes.headerWrap}>
      <img alt="Gyrodata" src={robo} className={classes.logo} />
      <h4 className={classes.name}>Maersk Invincible</h4>
    </div>
  );
};

export default Home;

方案2 更符合MUI开发规范的写法（用内置组件） #

直接使用MUI自带的Stack组件实现flex布局，不需要手写flex相关样式：

import React from "react";
import robo from "./robo.png";
import { makeStyles } from "@mui/styles";
import Stack from "@mui/material/Stack"; // 引入Stack组件
const useStyles = makeStyles({
  logo: {
    width: 100,
  },
  name: {
    width: 100,
    margin: 0
  },
});
const Home = () => {
  const classes = useStyles();

  return (
    {/* direction="row"代表横向排列，alignItems="center"垂直居中，spacing是元素间距单位为MUI默认间距8px */}
    <Stack direction="row" alignItems="center" spacing={2}>
      <img alt="Gyrodata" src={robo} className={classes.logo} />
      <h4 className={classes.name}>Maersk Invincible</h4>
    </Stack>
  );
};

export default Home;

内容的提问来源于stack exchange，提问作者Code cracker