Component System with Material UI: Typography

This is the second post from a series which will attempt to create a Component System that maps an already created Design System: VTEX Design Sistem

In this post I'll be creating the code needed to map the Typography style from the design system into the project. For that I'll be overriding the defaults style values and also creating new variants.

You can check the Typography configuration within Figma here

A Typography is a component to render text into a React App, Mui has an already pre-defined set of variant values for this component, here is the documentation for it.

Setting variants styles

In the code example above I'm using the typography: {...} property to set the correct styling for the already pre-defined typography variants, and also create new ones, like: bodyBold, small, smallBold.

Also, at the same level than typography:{...} there is another property called components:{...}, in here I'm using MuiTypography to specify which html node should be rendered when any of the new variants are being called (variantMapping).

If I don't set this variantMapping, when I use a Typography with variant "small", for example, a span will be rendered.

Here is how the code above looks on a React application:

Customizing Typographies on the flight

The idea of creating and setting variants on Mui is to write more maintainable and clean code, most of the time you only need the default version of Typography but when you need specific changes like the color of the text, you can pass it as a property.

For that you can pass a color prop to a Typography component to use any defined color on the theme.

You can see more examples of this on the codesandbox above.

Conclusion

Set all your typographies styles needed on your application, create some custom variants if need it and use the Typography component so you don't need to set the correct styles on each text you need to display.

Also take advantage of the color prop to customize the color in case you need it.