White-labeling in reactjs with Materail-UI and Tailwind

532 Views Asked by At

I have a react setup in which I am using Tailwind and Material-UI. I have a component library in the Storybook which has MUI Theme in it to style the variants like button outline. I am trying to find a way of how can I use these two things to make the react app white-labeled. Basically, Which properties I can set in my theme that it can be directly applied to the components by the user/providers/companies. Currently, my theme looks something like this in the component library.

import { createTheme, ThemeOptions } from '@mui/material/styles';
import { Colours } from '../common';

export const MyThemeOptions: ThemeOptions = {
    palette: {
        primary: {
            main: Colours.primary,
        },
        secondary: {
            main: Colours.secondary,
        },
        error: {
            main: Colours.error,
        },
        warning: {
            main: Colours.warning,
        },
        info: {
            main: Colours.info,
        },
        success: {
            main: Colours.success,
        },
    },
    components: {
        MuiButton: {
            styleOverrides: {
                root: {
                    borderRadius: '4px',
                },
                contained: {
                    padding: '4px 12px',
                },
                outlined: {
                    border: '1px solid #bdbdbd',
                    textTransform: 'none',
                    minWidth: 0,
                    color: '#212121',
                },
                outlinedSizeSmall: {
                    padding: '2px',
                },
                outlinedSizeMedium: {
                    padding: '6px',
                },
                outlinedSizeLarge: {
                    padding: '10px'
                },
            },
        },
        MuiButtonGroup: {
            styleOverrides: {
                grouped: {
                    minWidth: 0,
                },
            },
        },
        MuiCard: {
            styleOverrides: {
                root: {
                    boxShadow: '0 3px 7px 0 rgba(98, 125, 152, 0.16), 0 0 2px 0 rgba(36, 59, 83, 0.04)',
                },
            },
        },
        MuiToggleButton: {
            styleOverrides: {
                root: {
                    border: '1px solid #bdbdbd',
                    borderRadius: '4px',
                    textTransform: 'none',
                    color: '#212121',
                    minWidth: 0,
                },
                sizeSmall: {
                    padding: '2px',
                },
                sizeMedium: {
                    padding: '6px',
                },
                sizeLarge: {
                    padding: '10px',
                }
            }
        }
    },
};

const MyTheme = createTheme(MyThemeOptions);
export default MyTheme;

I am not able to find an article or tutorial or something which could lead me in a direction of how can I achieve the white labeling? If you know any knowledge asset in this direction, please share with me. Thank you!

0

There are 0 best solutions below