React에서 Body의 배경색을 동적으로 설정

단일 페이지 애플리케이션에는 하나의 body 요소만 있고 전역 스타일시트에서 body의 배경색을 지정할 수 있지만 웹사이트의 다른 페이지에 대해 배경색을 동적으로 업데이트하는 것은 쉽지 않습니다.

나는 이 문제를 발견하고 즉시 구글링some solutions했지만 만족하지 못했습니다.

그래서 저는 CSS 사용자 정의 속성을 사용하여 해킹되었지만 작동하는 패치를 코딩했습니다. 권장되는 방법인지 아닌지는 모르겠지만 살펴 보겠습니다.

CSS 사용자 정의 속성

기본 색상 값을 포함하는 :root 또는 html 요소 스타일에서 사용자 정의 속성을 설정합니다. 글로벌 스타일시트에서 이 스타일을 지정하십시오. 귀하의 경우에는 아마도 index.css 일 것입니다.

:root {
    --bodyColor: "#000000";
}
body {
    background-color: var(--bodyColor);
}

함수 만들기

내보낼 준비가 된 함수가 포함된 setBodyColor.js 디렉토리에 src라는 파일을 만듭니다. 기능은 아래와 같습니다.

export default function setBodyColor({color}) {
    document.documentElement.style.setProperty('--bodyColor', color)
}

이러한 방식으로 css 사용자 정의 속성--bodyColor의 값을 수정할 수 있습니다.

기능 사용

다음을 사용하여 구성 요소에서 함수를 가져옵니다.

import setBodyColor from './setBodyColor'

폴더 구조에 따라 상대 URL./setBodyColor을 변경합니다.

기능 구성 요소에서 사용하십시오.

const HomePage = () => {

    setBodyColor({color: "#ffffff"})

    return (
        <main>
        ...
        </main>
    )
}

export default HomePage

이 기능을 여러 구성 요소에서 사용할 수 있으며 색상을 전달하여 본문의 배경색을 수정할 수 있습니다.

Note that you must call the function on every page or component to set the background color of the body. Otherwise, it will just take the value of the background color of the previous page.

이 해결 방법은 background-color 속성으로 제한되지 않습니다. 원하는 만큼 사용자 지정 속성을 설정할 수 있습니다. 하지만 앞서 말했듯이 이것이 완벽한 기술인지는 알 수 없으므로 귀하의 사례에 대해 할 수 있는 최선의 방법은 귀하 자신의 조사를 수행하는 것입니다.

또한 더 나은 솔루션이 있으면 언제든지 ping을 보내주십시오.

종료합니다.