我试图建立一个简单的反应页面，但我在一开始就卡住了：我的文本开箱即用，我不明白为什么会发生这种情况。

有人能看看我的风格吗？用继承的风格拍照

如果我删除whiteSpace="nowrap"，文本将远低于此值。我的目标是将和文本放在图片底部。有人知道问题可能出在哪里吗？非常感谢！

HeaderMui. js

 const url = process.env.PUBLIC_URL  + "/img/castle.jpg";
const useStyles = makeStyles((theme => ({
标题：{
高度：“57vh”，
背景：url（${url}），
背景大小：“封面”，
对齐项目：“中心”，
理由内容：“中心”，
对齐项目：“中心”，
背景位置：“中心中心”，
背景附件：“固定”，
flexGrow：1，
}，
标题文本：{
text对齐：“左”，
字体大小：20，
线路高度：20，
boxS不缩放：“边框框”，
显示：“内联块”，
对齐项目：“中心”，
text对齐：“中心”
}，
文本包装器：{
display: "block",
paddingRight: 15,
paddingLeft: 15,
alignItems: "center"
},
}
)));

function HeaderMui() {
  const classes = useStyles();

  return (
    <Box className={classes.header} flexWrap="nowrap">
    <Box className={classes.textWrapper} width="100%" flexWrap="nowrap">
    <h2 >Hogwarts Online</h2>
      < Box component="span" className={classes.headerText} display="inline-block" flexWrap="wrap" whiteSpace="nowrap"> Hogwarts Online is the first platform out there for the wizards far away from Hogwarts. Experience the power of British magical education while still working muggle job. All you need is a magic wand and to be a proved wizard!</Box>
      </Box>
    </Box>
  );
}
export default HeaderMui;
js应用