React MUI 5 Typography Text Align Center

React MUI 5 Typography Text Align Center

08/22 By frontendshape

In this section we will see how to typography text center in mui 5 using react js. There is three way you can center text in mui 5 first you can use inline react css and second using mui 5 props and third way you can use mui sx props.


React MUI 5 Typography Text Align Center

1. MUI 5 text center using Inline react css.

import { Typography } from '@mui/material';

export default function Home() {
  return (
    <>
      <Typography variant="h5" style={{ textAlign: 'center' }}>
        React MUI 5 Text Align Center Using Inline CSS
      </Typography>
    </>
  );
}


2. MUI 5 text center using React MUI 5 Props.

import { Typography } from '@mui/material';

export default function Home() {
  return (
    <>
      <Typography variant="h5" align="center">
        React MUI 5 Text Align Center
      </Typography>
    </>
  );
}
React MUI 5 Text Align Center Using props

React MUI 5 Text Align Center Using props

3. MUI 5 text center using React MUI 5 sx props.

<Typography variant="h5" sx={{ textAlign: 'center' }}>



Enter Your Search Query