DEV Community

Victor Gonzalez
Victor Gonzalez

Posted on

2 1 1 1 1

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

Figma Preview

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:
    Mui buttons 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:

// App.js
const theme = createTheme({
typography: {},
components: {
MuiTypography: {},
MuiTextField: {},
MuiList: {},
MuiButton: {
styleOverrides: {
root: {},
},
variants: [],
},
},
});
function App() {
return (
// This (ThemeProvider) should be set on the very top level of the components hierarchy
<ThemeProvider theme={pauTheme(userRepo.actions.getTheme())}>
<App /> // It could be multiple routes
</ThemeProvider>
);
}
view raw App.js hosted with ❤ by GitHub

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.

const theme = createTheme({
palette: {
primary: { main: "#0C389F" },
secondary: { main: "#DD1659" },
error: { main: "#E13232" },
warning: { main: "#FFB100" },
info: { main: "#8BC34A" },
newColor: {
main: "#DC52F0",
contrastText: "#ADF528"
}
},
spacing: 8
});
view raw theme.js hosted with ❤ by GitHub

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.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more