[ 리액트 ] 페이지별 header 스타일 변경 방법

Question

프로젝트 폴더 구조는 간단하게 설명하자면 만들어놓은 페이지, 레이아웃등을 react router dom을 사용해서 App.tsx 에서 경로 이동하는 형식으로 짜놨습니다.거의 모든 페이지가 똑같은 헤더를 사용하기때문에 레이아웃에 만들어놓은 header를 걸어놨습니다.공통으로 사용하는 헤더는 배경이 transparent, 텍스트가 white로 설정되어있습니다. (스크롤할경우 검은색변경)그렇다보니 기본적으로 화면이 white인 경우는 header의 텍스트가 전혀 보이지 않습니다.그래서 특정페이지에서만 헤더 색상의 default값을 변경시키고 싶은데요.또다른 헤더를 새로 만드는방법말고 다른방법이 있을까요?app.tsx가 아닌 페이지마다 header를 걸어서 props를 받는 방법을 해보려했으나 잘안되었고지금생각중인 방법은 헤더컴포넌트에서 특정값일때는 색상을 설정해준다음, 페이지 컴포넌트로 가서 그 특정값을 넣어주는 방법.. 말고는 당장 생각나는게 없네요

몰랑토끼 · Answer

outlet쓰세요

[ 리액트 ] 페이지별 header 스타일 변경 방법

1개의 답변

Q&A 목록