I'm trying to load two React micro front-end applications inside the single spa. But I'm facing style conflict with respect to the theme.
systemjs-import map inside index.ejs
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
"@nviera/sos-react-header": "//localhost:8080/...sos-react-header.js",
"@nviera/sos": "//localhost:8081/...sos.js"
}
}
</script>
Using the template in the index.ejs
<template id="single-spa-layout">
<single-spa-router>
<nav class="topnav">
<application name="...sos-react-header"></application>
</nav>
<div class="main-content mt-16">
<route path="/">
<application name="sos"></application>
</route>
</div>
</single-spa-router>
</template>
root-config.js
const routes = constructRoutes(document.querySelector('#single-spa-layout'));
const applications = constructApplications({
routes,
loadApp({ name }) {
return System.import(name);
},
});
const layoutEngine = constructLayoutEngine({
routes,
applications,
active: false,
});
applications.forEach(registerApplication);
layoutEngine.activate();
start();
header application
main application
The issue I'm facing here is, I have used AppBar in the header which has Paper in it, and defined custom backgroundColor in the theme. This backgroundColor is getting override by another micro front-end (which is the "Content micro front-end")
How can we encapsulate themes separately for separate micro front-ends and avoid this conflict?
