React中使用MUI Typography组件时文本无法换行问题

你的问题大概率是因为LoginPageHeader组件被包裹在一个设置了display: flex的父容器中，此时两个Typography作为flex子元素，默认会沿水平方向排列（flex-direction: row），所以显示在同一行。以下是几种可行的解决方案：

方案1：用Box组件包裹并设置垂直布局 #

MUI的Box组件可以方便地控制布局，给它设置flex-direction: column让子元素垂直排列，同时可以用gap控制间距：

import React from "react";
import { Typography, Box } from "@mui/material";

const LoginPageHeader = () => {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <Typography variant="h5" sx={{ color: "white" }}>
        Welcome Back!
      </Typography>
      <Typography sx={{ color: "#b9bbbe" }}>
        We are happy that you are with us!
      </Typography>
    </Box>
  );
};

export default LoginPageHeader;

方案2：强制Typography为块级元素 #

如果不想修改外层容器，直接给每个Typography添加display: block样式，确保它们独占一行：

import React from "react";
import { Typography } from "@mui/material";

const LoginPageHeader = () => {
  return (
    <>
      <Typography variant="h5" sx={{ color: "white", display: 'block' }}>
        Welcome Back!
      </Typography>
      <Typography sx={{ color: "#b9bbbe", display: 'block' }}>
        We are happy that you are with us!
      </Typography>
    </>
  );
};

export default LoginPageHeader;

方案3：替换Fragment为块级容器 #

把React Fragment换成普通的div或者MUI的Box（不带flex样式），确保内部元素处于块级上下文：

import React from "react";
import { Typography } from "@mui/material";

const LoginPageHeader = () => {
  return (
    <div>
      <Typography variant="h5" sx={{ color: "white" }}>
        Welcome Back!
      </Typography>
      <Typography sx={{ color: "#b9bbbe" }}>
        We are happy that you are with us!
      </Typography>
    </div>
  );
};

export default LoginPageHeader;

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