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 />

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.