CODEWITHSUNDEEP
reactjsmicro-frontendwebpack-module-federation
SDK
SDK

Reputation: 1518

How to handle design system in micro-frontends?

In the micro-frontend every application would be running separately, in that case, each one of the applications will be having its own CSS.

Let's assume we are taking MUI as the UI library. So each application that uses MUI will be having its own theme provider.

Now the stakeholder wants to change the button's color from blue to black, in this scenario I have to manually go and change the color to each one of the applications separately.

Do we have to do like this only or any other pattern is available in Micro-Frontend to solve this Design System issue?

Please help me with your suggestions !

Upvotes: 1

Views: 458

Answers (1)

Simran Singh
Simran Singh

Reputation: 2869

You can create a theming package for your micro-frontend apps. This package provides a theme object for Mui ThemeProvider. It can have some default theme properties and some additional (editable) properties which from an API.

Then you need a portal where your client or stakeholder can edit the theme, from some theme editor app. Basically, that will UPDATE your theme object (database).

Your package will GET those changes and update all your micro-frontend apps. I have seen a similar kind of implementation in a Turborepo app.

Upvotes: 1

Related Questions