single-spa 환경 내 MUI v4/v5 Style Injection 충돌 원인 분석 및 해결

MUI v4/v5 Style Conflicts in single-spa — A Complete Debug Record

Chloe Zhou2026년 4월 13일9분intermediate

AI 요약

Context

single-spa 기반 Microfrontend 아키텍처에서 CSS Isolation 부재로 인해 모든 Child App이 document.head를 공유하는 구조임. MUI v4(JSS)와 v5(Emotion)의 서로 다른 스타일 주입 시스템이 공존하며 스타일 우선순위 충돌이 발생함.

Technical Solution

MutationObserver를 통한 document.head 실시간 감시로 data-jss 태그 삽입 시점과 컴포넌트 마운트 간의 상관관계 규명
JSS의 Unmount 시 스타일 태그 삭제 및 Mount 시 재삽입 특성과 Emotion의 지속성(Persistence) 차이에 따른 우선순위 변동 분석
브라우저 캐싱으로 인한 번들 로드 속도 차이가 초기 렌더링과 재방문 시의 스타일 적용 순서를 변경시키는 메커니즘 파악
소스 코드 접근이 제한된 Child App의 MUI 버전을 확인하기 위해 배포된 JS 번들을 직접 fetch하여 Regex 기반으로 의존성 분석

실천 포인트

1. 동적 스타일 주입 이슈 발생 시 DevTools 대신 MutationObserver로 삽입 시점 추적

2. 재방문 시에만 발생하는 버그는 JS 번들 캐싱에 따른 실행 순서 변화 가능성 검토

3. 외부 모듈 소스 부재 시 배포 번들 fetch 및 정규표현식 스캔을 통한 의존성 검증

태그

#MUI #single-spa #Microfrontend #JSS #Emotion

원문 읽기