Component System with Material UI: Theme API

Material UI (now Mui) provides an arrange of React components ready to be used on any project, but the true power of Mui comes when creating a Component System that maps any Design System using the theme api.

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

There is something more than just the ability to create components system on top of the already created mui components that makes Material UI an awesome library to work with: High standards on how components works, and accessibility

I have taken the path to create a components system from scratch using any other styling method, and there is a point where some components are using some props and some others are using kind of the same ones, but slightly different, and this is a problem.

Since Mui has a well defined way on how components should work and what props they should receive, you don't have to worry about maintaining the components abstraction.

In order to create a component system first I'll explain some definitions that will help understand how it works…

Variant: A variant is an UI representation for a specific component state. For example: the already existing Mui Button variants:

createTheme: is a function Mui provides to overrides and create variants for the Mui components.

How to setup a theme in Mui

Mui provides a createTheme function and a <ThemeProvider />component, which allows us to wrap our React app with the ThemeProvider component and pass it down a prop called theme={createTheme({})}, so that way, any Mui component rendered within this ThemeProvider is going to use the styles set before on the theme.

The createTheme receives an object where you can override/create the styles for the already existing component variants or, create new ones.

The <ThemeProdiver /> is a React component which wraps the whole application so all Mui children components can access the theme and therefore use the theme styling.

Here is an example:

You can see in the example above the object passed to the createTheme function has a well defined structure. It has a component property where you can list all supported Mui component with a "Mui" prefix.

Then, the stylesOverrides and variants is where (how the name suggests) you can override the styles and create new variants.

I'm going to explain how to override each Mui components and create new variants on the next posts. For now, I'm just going to set the colors and spacing…

Setting the color palette 👨🏻‍🎨

Understanding the color configuration is crucial for styling correctly the Mui components. But anyway, remember you can always override that configuration for each Mui component later.

Mui has a default set of colors, you can check more info about this in here.

I'm creating the next example to add the Design System color guide into the Mui theme api.

In the example above I'm overriding all Mui defaults color values, and also I'm creating a new one: "newColor". You can see how it would be applied to the buttons components on the example below.

Also, you can manage the color configuration for the light and dark mode in this palette object. But I'll dig more on that on another post.

Conclusion

Use the <ThemeProvider theme={createTheme({...})} /> to set the color values Mui components are going to use when they are rendered.

Override and create more color palette values to set the design system color guide into the Mui component system.