В одностраничном приложении у вас есть только один элемент body, и хотя вы можете указать цвет фона body в глобальной таблице стилей, динамически обновлять цвет фона для разных страниц вашего веб-сайта непросто.

Я столкнулся с этой проблемой и сразу же погуглил некоторые решения, но они меня не удовлетворили.

Итак, я начал кодировать хакерский, но работающий патч, используя пользовательские свойства CSS. Я не знаю, является ли это рекомендуемой практикой или нет, но давайте посмотрим на нее.

Пользовательское свойство CSS

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

Установите пользовательское свойство в стиле элемента :root или html, которое содержит значение цвета по умолчанию. Укажите этот стиль в глобальной таблице стилей, в вашем случае это, вероятно, будет index.css.

Создание функции

Создайте файл с именем setBodyColor в каталоге src, который содержит функцию, готовую к экспорту. Функция показана ниже:

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

Таким образом, вы можете изменить значение пользовательского свойства css --bodyColor.

Использование функции

Импортируйте функцию в компонент, используя

import setBodyColor from './setBodyColor'

Измените относительный URL-адрес ./setBodyColor в соответствии со структурой вашей папки.

Используйте его в своем функциональном компоненте,

const HomePage = () => {    
    useSetBodyColor({color: "#ffffff"})    
    return (        
        <>...</>    
    )
}
export default HomePage

Вы можете использовать эту функцию в нескольких компонентах и ​​передать цвет, чтобы изменить цвет фона тела.

Обратите внимание, что вы должны вызывать функцию на каждой странице или компоненте, чтобы установить цвет фона тела. В противном случае он просто примет значение цвета фона предыдущей страницы.

Этот обходной путь не ограничивается свойством background-color. Вы можете установить столько пользовательских свойств, сколько хотите. Но, как я уже говорил ранее, я не знаю, является ли это надежной техникой, поэтому лучшее, что вы можете сделать в своем случае, — это провести собственное исследование.

Кроме того, если у вас есть лучшее решение, не стесняйтесь пинговать меня в твиттере.

Подписание.

Первоначально опубликовано на https://syntackle.live 3 сентября 2022 г.