This case study highlights a complex CSS conflict issue in a micro-frontends architecture using single-spa and MUI (Material-UI). Here's a summary of the key points:
-
Conflict Origin: The problem arises from two different versions of Material-UI (MUI) being used across multiple applications, with one version (v4) using JSS for CSS injection and another (v5) using Emotion.
-
CSS Class Overlap: Both MUI v4 and v5 use the same semantic class names like
.MuiCircularProgress-root. However, their styling rules differ:- MUI v5 with Emotion sets
border-radius: 50%for circular indicators. - MUI v4 with JSS sets
border-radius: 0.
- MUI v5 with Emotion sets
-
single-spa Behavior:
- single-spa manages JavaScript isolation but not CSS isolation, meaning all child applications share the same
<head>in terms of style tags. - When a route changes, single-spa mounts or unmounts child apps based on their activity functions.
- single-spa manages JavaScript isolation but not CSS isolation, meaning all child applications share the same
-
CSS Injection Differences:
- JSS injects and removes styles dynamically as it mounts/unmounts.
Read the full article at DEV Community
Want to create content about this topic? Use Nemati AI tools to generate articles, social posts, and more.

![[AINews] The Unreasonable Effectiveness of Closing the Loop](/_next/image?url=https%3A%2F%2Fmedia.nemati.ai%2Fmedia%2Fblog%2Fimages%2Farticles%2F600e22851bc7453b.webp&w=3840&q=75)



