Material UI Typography

Material-UI is a user interface library that provides pre-defined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Typography component in the Material-UI library.

Typography:

Typography is a Material-UI component used to standardize the text and its related CSS properties without worrying about browser compatibility issues.

Example:

<Typography variant="h1"> h1 - Heading Variant </Typography>

Installing React App:

Step 1: Create a React app using the following command.

npx create-react-app typography-example

Step 2: Now get into the project directory by the following command:

cd typography-example

Installing Material-UI: 

Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.

npm install @mui/material @emotion/react @emotion/styled
// OR
yarn add @mui/material @emotion/react @emotion/styled

Importing Typography:

You can import <Typography /> component from @mui/material using the following code.

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

Important Props and its values:

• align: It is used to align the text on the component. Example: inherit, left, center, right, or justify.
• color: It is used to set the text color of the component. Example: initial, inherit, primary, secondary, textPrimary, textSecondary, or error.
• variant: It is used to set the theme typography styles. Example: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button, overline, srOnly or inherit.
• classes: It is the custom CSS object to override the styles.
• paragraph: If this is true the text will have a bottom margin. Example: true or false.

Example: Implementing H1, H2, H3 styling using <Typography /> in App.js file.

Javascript

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

function App() {
  return (
    <div className="App">
      {/* Setting the text styling to H1*/}
      <Typography variant="h1">
        H1.Heading
      </Typography>
      {/* Setting the text to center with align prop */}
      <Typography align="center" variant="h2">
        H2.Heading
      </Typography>
      {/* Setting the text color to primary*/}
      <Typography color="primary" variant="h3">
        H3.Heading
      </Typography>
      {/* Setting the text type styling to be like a button */}
      <Typography variant="button">
        Button
      </Typography>
    </div>
  );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: