Line is not breaking after "Welcome Back". Both Welcome Back! We are happy that you are with us! comes at the same line.

I have tried this code, the line is not breaking after "Welcome Back!". It prints out " Welcome Back! We are happy that you are with us!" on the same line.

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

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

export default LoginPageHeader;

```
`

CodePudding user response：

I fixed the issue, Actually there was some error in the AuthBox.js file that I am trying to import.

Instead of using column, I have used coloumn. I replaced it with column and it started working.

const AuthBox = (props) => {
  return (
    <BoxWrapper>
      <Box
        sx={{
          width: 700,
          height: 400,
          bgcolor: "#36393f",
          borderRadius: "5px",
          boxShadow: "0 2px 10px 0 rgb(0 0 0 / 20%)",
          display: "flex",
          flexDirection: "column",
          padding: "25px",
        }}
      >
        {props.children}
      </Box>
    </BoxWrapper>
  );
};

CodePudding user response：

Yes in your case Typography rendered as <h5>Welcome Back!</h5><p>We are happy that you are with us!</p> which will come in single line when width space get less then it will wrap accordingly.

If you wan to show in two consequent line in two rows, i would recommend below one

   <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Typography
        variant='h5' 
        sx={{ color: 'white' 
        }}>
          Welcome Back!
        </Typography>
        <Typography sx={{ color: '#b9bbbe' }}>
          We are happy that you are with us!
        </Typography>
   </Box>