Using a design system that is built with MUI under the hood

[lucastobrazil]

I have a component library ("Motif") that exports components, some of which are built on Mui.

import { Button as MuiButton } from '@material-ui/core';

export const Button = props => <MuiButton {...props } />;

I also export my own ThemeProvider which is MuiThemeProvider with a defaultTheme baked in

import { MotifThemeProvider } from 'motif';

Then In my Gatsby site I want to wrap my MotifThemeProvider and import my components (eg Button).

Right now it works but I get a flash of unstyled content, which led me to this plugin.

I have it working, but when I look under the hood it looks like the plugin itself also adds a MuiThemeProvider and that you can just pass in the theme.

I was wondering if you could explain conceptually what this plugin does, assuming that I might need to write something custom for our specific use case.

Alternatively maybe I can export my theme and pass it via the options in this plugin, but ideally I want to leverage our own ThemeProvider to try as much as possibel to consume our components.

The issue I am having is that none of my components are applying my styles, it looks like the default MUI themes