왜 CSS 클래스가 Next.js에서 dangerouslySetInnerHTML와 함께 작동하지 않을까 (그리고 해결 방법)

Source: Dev.to

문제점

React / Next.js에서 SEO 중심이거나 CMS 기반의 콘텐츠를 다룰 때, 우리는 종종 dangerouslySetInnerHTML을 사용해 HTML 문자열을 렌더링합니다. 모든 것이 정상적으로 보이지만… HTML 콘텐츠 안에 CSS 클래스를 넣으면 스타일이 전혀 적용되지 않는 것을 발견하게 됩니다.

예시 콘텐츠

const content = `
  You can consult certified nutritionists
  from home.
`;

다음과 같이 렌더링됩니다:

그리고 styled‑jsx 로 스타일을 지정합니다:

{`
  .highlight {
    color: #0a7cff;
    font-weight: 600;
  }
`}

결과: .highlight 스타일이 적용되지 않습니다.

이유: Next.js는 styled-jsx를 사용하여 CSS를 JSX‑렌더링된 요소에만 적용하도록 스코프합니다. styled-jsx 범위 밖에서 다음과 같은 선택자는:

.highlight { ... }

다음과 같이 변환됩니다:

.highlight.jsx-123456 { ... }

하지만 삽입된 HTML에는 해당 해시가 붙지 않으므로 스타일이 매치되지 않습니다.

해결 방법

클래스 선택자를 :global() 로 감싸서 스코프되지 않도록 합니다.

{`
  :global(.highlight) {
    color: #0a7cff;
    font-weight: 600;
  }

  :global(.link) {
    color: #0070f3;
    text-decoration: underline;
  }
`}

이제 삽입된 HTML이 정상적으로 동작하고 스타일이 기대한 대로 적용됩니다.