React MUI Typography
- General: MUI will not launch the Roboto font by itself. Any fonts used in your program must be loaded by you.
- Roboto Font CDN: The Roboto Font can be added using the following CDN link <link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap”/>
- Install with npm: The Roboto Font can be installed by running the following command in the terminal npm install @fontsource/roboto or by using yarn add @fontsource/roboto to install using yarn.
- Component: Applying a standard set of font weights and sizes to your application is simple with the help of the typography component.
- Theme: The typography theme is a useful tool when we are not able to use the typography Component.
- Changing the semantic element: The variantMapping prop is used by the Typography component to link a UI variation to a semantic element.
- Adding & disabling variants: We can add custom typography varients other than the default typography varients and can also disable the varients if we don’t need them.
- System props: The typography supports all system properties. They can be directly used as a prop on the component.
- Accessibility: For accessible typography, there are a few important things to remember: Color, Font size, Heading hierarchy.
- API: The Typography API’s are:
- <Typography />
How to use Typography in Material-UI React ?
Material UI (MUI) is an open-source React component library that is based on the Material Design of Google. MUI provides a collection of robust and customizable component that makes web development easier. Material UI is a great library, making choices for you but letting you make your own choices. All the components can be customized.