I am running into an issue (similar one here) with yarn workspaces. I understand that there are two copies of Theme context and for some reason the rendering of the component from library is changing the order of applied classes.
Its the same set of classes which apply to header in both the cases.. i.e.
classes while rendering a HomePage (or test-component) in MAIN-APP
MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-2 makeStyles-appBarShift-3 mui-fixed MuiPaper-elevation4
classes while rendering a component-1 from LIBRARY-COMPONENTS
MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-2 makeStyles-appBarShift-3 mui-fixed MuiPaper-elevation4
Like stated above by @Jerome in the mentioned issue, .MuiAppBar-colorPrimary gets applied first giving it the required background-colour whereas in the other case (loading from library) .MuiPaper-root gets applied first overriding background-colour and creating the issue
How can I fix / troubleshoot this further?
Btw, structure of apps in my case
REPO
MAIN-APP -- HomePage --- HEADER (containing AppBar) --- FOOTER --- CONTENT (having ...) -- test-component
LIBRARY-COMPONENTS -- Component-1
LIBRARY-UTILS -- Theme (using createMuiTheme)
(for yarn workspaces)
- node_modules
- package.json