styled components가 일부분?이 적용이 안됩니다.

Question

nextjs 13으로 진행 중이고, useModal hook을 만들어서 사용 중 입니다.스타일드 컴포넌트를 사용해서 공통 버튼 부분을 만들었고, 실제로 버튼 props를 전달하면 잘 적용됩니다.그런데 그냥 다른 컴포넌트 페이지 내부에서 일반 button을 만들어서 모달 on, off 동작을 하면 모달 내부에서 공통으로 사용된 버튼이 스타일이 안먹힙니다.제가 뭘 놓치고 있을까요.. 3자의 눈으로 부탁드려도 모달 열고 닫고 하는 로직 이런 부분엔 문제가 없다고 하던데 머리가 아픕니다.적용이 안될려면 아예 안되던가해야지..조건부 렌더링 부분에서만 안되는거 같기도 합니다. nextjs 13으로 진행 중이고, useModal hook을 만들어서 사용 중 입니다.스타일드 컴포넌트를 사용해서 공통 버튼 부분을 만들었고, 실제로 버튼 props를 전달하면 잘 적용됩니다.그런데 그냥 다른 컴포넌트 페이지 내부에서 일반 button을 만들어서 모달 on, off 동작을 하면 모달 내부에서 공통으로 사용된 버튼이 스타일이 안먹힙니다.제가 뭘 놓치고 있을까요.. 3자의 눈으로 부탁드려도 모달 열고 닫고 하는 로직 이런 부분엔 문제가 없다고 하던데 머리가 아픕니다.적용이 안될려면 아예 안되던가해야지..조건부 렌더링 부분에서만 안되는거 같기도 합니다. 확인 버튼은 공통으로 사용하는 버튼에서 가져온 부분.. 댓글 덕분에 해결됐습니다!

codezzzz · Answer

useEffect(() &#61;> { let timer : number if (message) { timer &#61; setTimeout(() &#61;> { hideToast() }, 3000) } return () &#61;> { clearTimeout(timer) } },[message, hideToast])이렇게 해도 그럴까요? 이문제는 아닐꺼같지만..

codezzzz · Answer

Toast 컴포넌트 부분에도 use client 추가해보세요..!

doooss · Answer

전역 registry 설정이 빠진거 같습니다. (추정)https://nextjs.org/docs/app/building-your-application/styling/css-in-jsstyled-components 부분에 있습니다. 해당 코드를 layout에 가이드대로 심어주세요

styled components가 일부분?이 적용이 안됩니다.

3개의 답변

Q&A 목록