在MUI中对齐文本的第二行

import React from 'react';
import { Typography, makeStyles } from '@mui/material';

const useStyles = makeStyles({
  text: {
    display: 'block',
    textAlign: 'center', // 设置对齐方式
    lineHeight: '1.5', // 设置行高
  },
});

function AlignSecondLineText() {
  const classes = useStyles();
  return (
    <Typography className={classes.text}>
      这是第一行文本
      <br />
      {`这是第二行文本`}
    </Typography>
  );
}

export default AlignSecond => AlignSecondLineText;

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

function AlignSecondLineText() {
  return (
    <Box display="flex" flexDirection="column" alignItems="center">
      <Typography>这是第一行文本</Typography>
      <Typography>这是第二行文本</Typography>
    </Box>
  );
}

export default AlignSecondLineText;