theming react multi-tenant application

Question

I'm struggling for a while with this problem .

In my company, we are starting a new multi-tenant react SPA application where every tenant corresponds to a different client.

Clients based on contracts could have customization , from a logo or colors to (rarely) a custom styled components, like for example a custom header with a different element position, a background image instead of a color and so on.

What could be the best solution to do this ?

I have been thinking these solutions, but I really don't know if are correct or not:

• A build for each client with a custom theme component with all the different style property
• A build for each client with a custom component library (which could extend ours for updates) injected via webpack during the build process
• Fetching theme via apis and switch for 'client's custom components'
• Fetching theme via apis (themes which contains the props for creating the custom components)

Thank you

Answer 1

Demo https://antd-live-theme.firebaseapp.com/

I've developed a solutions last year which did not cover all the requirements in OP's post but users/tenants can set color based themes using Ant Design (React Component's Library). Here is demo where you can set theme variables https://antd-live-theme.firebaseapp.com/ which is based on following package

https://github.com/mzohaibqc/antd-theme-webpack-plugin

If you can't use Ant Design due to some reason then there is another package which allows you to process css files and create a color.less file containing only those css rules which are related to colors like background color, color etc. which can be imported in index.html and now you can change those color variables using some UI (using api less.modifyVars())