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" >
{ }
<Typography variant= "h1" >
H1.Heading
</Typography>
{ }
<Typography align= "center" variant= "h2" >
H2.Heading
</Typography>
{ }
<Typography color= "primary" variant= "h3" >
H3.Heading
</Typography>
{ }
<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:
Last Updated :
26 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...