tailwind css 와 mui 와 함께 사용할 경우 mui 의 스타일이 일부 적용이 되지 않는 문제가 발생한다.
좀 더 세부적으로 보자면, mui nextjs integration 에 정의되어있는 AppRouterCacheProvider 컴포넌트로 전체 layout.tsx 를 래핑하는 방식을 사용했을 경우이다.
AppRouterCacheProvider 를 사용하는이유?
nextjs app router 가 안정화되고 난 이후 기존 nextjs pages integration 의 업데이트 버젼이다.
주요 기능으로는 하이드레이션과정 충돌 제어, 서버 렌더링시 스타일 주입, FOUC 현상 최적화 등이다.
그 중에서 사용한 옵션은 enableCssLayer 이다.
enableCssLayer 옵션은 프로젝트 내에서 다른 스타일 라이브러리와 함께 사용할 때 설정하는 옵션이며
다른 스타일이 mui 의 스타일을 덮어쓸 때 충돌이 없게 만들어주는 기능을 한다.
소스코드를 까보면 enableCssLayer가 true 일 경우, 전체 스타일을 @layer 로 그냥 묶기만 한다.
그래서 무슨 문제가 발생했지?
css 의 우선순위를 낮춘다고 했는데, 일부 스타일 자체가 안먹혀버리는 문제가 발생한다.
왜 발생하는거지?
npx create next app 을 했을 경우 예를 들어보면,
말 그대로 css 우선순위를 낮췄으니, 다른 스타일이 우선적으로 적용될 것이다.
근데 @layer 특성상 @layer 가 없는 스타일이 더 우선순위가 높으므로 현 기점으로 mui 스타일이 맨 마지막이다
globals.css 에 있는 스타일이 우선적으로 적용되고 mui 스타일은 뒷전이다.
gloabals.css 스타일을 지우면 스타일이 잘 먹힌다.
그래서 이미 운영하고 있는 프로젝트에서 mui + tailwind css 를 설치해서 작업하려면 갑자기 저런 문제가 발생할 수 있는것이다. 이미 적용된 전역 스타일이 있다면 말이다.
어떻게 해결했지?
위에서 언급했듯이, 이미 있는 스타일을 잘 확인하고 충돌할 수 있을 것 같은 부분은 미리 지우고 적용해야 한다.
현재 작업하는 MUI + tailwind css 환경에서는 모든 컴포넌트에 영향이 있어서 필요한 부분만 따로 스타일을 다시 작성을 해서 해결을 했다.
@layer 가 중요한 기능인가?
‘우선순위’를 제어하는 역할을 하다보니까 독단적으로 사용되기보단 여러 기술을 통합할 때 많이 사용되는 기능이다.
이 문제가 발생하기 전까지 존재 자체도 몰랐고 작업할 때 그닥 많이 사용될 것 같지도 않다.
하지만 최근 tailwind css 4.0 에서도 동작 방식을 이전 버젼에 비해 많은 변화가 생겼는데 @layer 방식으로 업데이트가 되었다. @layer 가 기본 동작 방식이 된 것이다.
그 외 Vanilla Extract, styleX 등 공식 지원을 하는 경우도 있고 그렇지 않은 오픈소스는 별도의 플러그인이나 추가적으로 구현할 수 있는 방법은 많다.
나온지 몇년 안된 기술이기도 하고 점유율이 높은 스타일 라이브러리들이 조금씩 사용하고 있는 상황이니 알아둘 필요는 있어보인다.
@layer로 해결한 경험
현재 UI 라이브러리를 개발중인데,
라이브러리 내에서 생성한 스타일 vs 라이브러리를 사용하는 프로젝트 내에서 생성한 스타일 우선순위 충돌이 생겼다.
UI 라이브러리는 StyleX 를 사용하고 있었고 프로젝트에서 ‘UI 라이브러리와 StyleX 를 같이 사용하면 어떻게 되지?’ 란 생각에 테스트를 해봤는데, UI 라이브러리의 우선순위가 더 높았다.
내 의도는 UI 라이브러리의 스타일이 우선순위가 더 낮아야 하고 나중에 적용하는 스타일이 오버라이딩 되게 할 생각이였는데, 그 반대로 동작하고 있었다.
물론 이 문제는 프로젝트 빌드 설정을 어떻게 가져가느냐, 라이브러리 설정을 어떻게 하느냐 등등 다른 방면에서 충분이 해결이 가능한 문제이지만 전에 경험한 enableCssLayer 사례가 생각나서 그대로 적용해봤다.
MUI 의 AppRouterCacheProvider enableCssLayer 옵션이 딱 지금 상황에 맞는 옵션이였다.
다행히 StyleX 에서도 useCSSLayers 빌드 설정이 있었다.
UI 라이브러리에서 빌드할 때 @layer 를 적용한 css 를 생성하게 했고 그대로 export 를 하면
UI 라이브러리 @layer css vs 프로젝트 내에서 생성된 css 이니 우선순위가 확실히 낮아진다.
@layer vs @layer
위 사례처럼 끝나면 좋았겠지만, 만약 라이브러리와 프로젝트 모두 레이어를 쓰고 있다면…?
우선순위가 같기 때문에 먼저 적용된 스타일이 우선순위가 낮다.
프로젝트 내 styleX 가 useCSSLayers 설정이 되어있고 사정상 false 로 줄 수 없는 상황이라면 문제는 해결되지 않았을 것이다.
이 문제는 @layer 의 순서를 사용자가 직접 변경해서 해결할 수 있는데, 현재 @layer 를 사용하는 tailwind css, styleX 둘다 빌드 설정파일에 @layer 순서를 변경할 수 있는 커스텀 옵션이 없고 이름도 변경이 불가능하다.
소스코드 내부에 이름도 하드코딩 되어있어서 정말 건들기 힘들다.
내부적으로 변경하지 않는것을 원칙으로 둔 것 같은데 순서를 사용자가 조작하게 만들었을 때 어떤 문제가 발생하는지에 대해서는 아직까진 잘 모르겠다.
커스텀 가능하게 바뀌었으면 좋겠다.
