module(2)
-
[CSS/SCSS] className 없이 스타일 적용하는 트릭
리액트를 쓰다 보면 간혹 스타일이 “왜 안 먹지?” 싶은 경험을 하게 됩니다. 최근 작업 중 실제로 겪은 사례를 정리해 보겠습니다. 이런 코드, 왜 CSS가 적용이 안 될까?다음과 같은 구조의 React 컴포넌트가 있다고 가정해 보겠습니다 {description} 여기서 Thumbnail에 스타일을 적용하고 싶은데, 아래처럼 작성한 CSS가 전혀 먹히지 않았습니다..thumbnail { bottom: 40px;} 그런데 신기하게도 다음과 같이 수정하면 스타일이 정상적으로 적용됩니다..shortsArea { [class*="thumbnail"] { bottom: 40px; }} 왜 이걸 쓰는 경우가 생기냐면…Thumbnail 컴포넌트가 외부에서 className을 전달..
2025.04.17 -
[CSS/SCSS] React에서 Swiper 스타일이 안 먹힐 때 – .swiper 대신 :global(.swiper)를 써야 하는 이유
리액트에서 Swiper 라이브러리를 사용할 때, SCSS로 커스텀 스타일을 주려는데 스타일이 전혀 적용되지 않았던 경험, 혹시 있으신가요?이 문제는 SCSS 모듈(CSS Modules) 때문에 발생합니다. 그 이유와 해결 방법에 대해서 알아봅시다.문제의 원인: SCSS Modules의 클래스 네이밍 방식SCSS 모듈을 사용하면 클래스명은 로컬 스코프(local scope)로 변환됩니다. 즉, 아래처럼 작성한 .swiper 클래스는 실제 HTML에선 swiper_xyz123처럼 바뀝니다.하지만 Swiper 라이브러리는 HTML을 렌더링할 때 순수한 전역 클래스명인 .swiper를 사용합니다.결과적으로, SCSS 모듈에서 정의한 스타일은 Swiper의 클래스에 적용되지 않는 거예요. 해결 방법: :globa..
2025.04.16