react 공부중인데 질문하나만 드리겠습니다

Question

modal이라는 이름으로 className 작성시 css가 작동이 안되는데 왜그런걸까요?className 다른 이름으로 바꾸니까 잘 작동하는데 제가 무슨 규칙을 어긴걸까요?

kenu,전독시 · Answer

가장 흔한 원인 중 하나는 CSS 모듈을 사용하고 있을 때 발생할 수 있습니다. CSS 모듈은 특정 컴포넌트에만 국소적으로 스타일을 적용하는 기술로, 컴포넌트 파일명에 .module.css 확장자를 사용하여 스타일을 정의합니다. 이 경우, 컴포넌트에서 CSS 모듈을 임포트하고 사용하는 클래스 이름은 모듈 내에서 정의된 클래스 이름과 일치해야 합니다. 만약 modal이라는 클래스 이름이 CSS 모듈 내에 정의되어 있지 않다면, 해당 클래스 이름을 사용하여 스타일을 적용할 수 없습니다. 이 문제를 해결하기 위해서는 CSS 모듈 내에 modal 클래스를 정의하거나, 다른 이름으로 클래스를 정의하고 해당 이름을 사용해야 합니다 2.또 다른 가능성은 CSS 클래스 이름이 전역적으로 충돌하는 경우입니다. CSS 모듈을 사용하지 않고 전역 CSS 파일에서 클래스 이름을 정의한 경우, 다른 CSS 파일이나 라이브러리에서 동일한 클래스 이름을 사용하고 있을 수 있습니다. 이 경우, 클래스 이름을 변경하거나, CSS 모듈을 사용하여 스타일 충돌을 방지할 수 있습니다 4.

잣댐스키 · Answer

이유는 많은데 보통 modal container 등과 같이 어디서나 쓰이는 클래스의 경우 자신도 모르게 다른 모듈이나 패키지 사용하면서 css를 추가하여 간섭하는 경우가 있어요..가장 정확한건 크롬 개발자모드에서 해당 요소 선택해서 걸려있는 css 를 확인하는 방법입니다. 본인이 작성한 style 외에 또 걸려있는게 있는지 확인하다보면 알 수 있으실 거애요

Magritte · Answer

코드 보여주시면 더 정확히 알려드릴 수 잇어요리액트 코드와 css 알려주시면 좋아요

react 공부중인데 질문하나만 드리겠습니다

3개의 답변

Q&A 목록