Изменить стили навигации в зависимости от текущего пути Gatsbyjs - PullRequest
Новая
       5

Изменить стили навигации в зависимости от текущего пути Gatsbyjs

1 голос
/ 15 января 2020

Я довольно новичок в Гэтсби Js, я изо всех сил пытаюсь понять, как я могу изменить свой стиль компонентов заголовка на основе текущего пути. Компонент Header является общим для всех страниц, но стилизация должна немного измениться, когда я перейду на другие страницы, такие как / портфолио и / команда. Из-за того, что Gatsby SSR работает при загрузке первой страницы, когда путь - "/ portfolio или" team ", надлежащий стиль заголовка не меняется, поскольку код для изменения className компонента заголовка происходит в браузере. Можно ли использовать API браузера или SSR для добавления / удаления правильного className компонента Header? Надеюсь, я прояснил это достаточно.

1 Ответ

1 голос
/ 15 января 2020

На самом деле это легко. Gatsby поставляется с удобным плагином под названием реагирующий шлем , убедитесь, что он есть в вашем package.json, если нет, проверьте Документы для установки.

Все, что вам нужно сделать, это импортировать helmet внутри целевой страницы , например portfolio.js

import { Helmet } from 'react-helmet'

После компонента <SEO> добавьте компонент Helmet и определите Класс CSS в элементе bodyAttributes выглядит следующим образом: 

<Helmet bodyAttributes={{ class: 'portfolio-page' }} />

Это добавит класс portfolio-page к тегу страницы body, и, таким образом, вы можете настроить таргетинг на этот класс, как при обычном CSS классы. 

.portfolio-page .your-navigation {
   background-color: black;
}

Вот пример codeSandbox для живого примера. Проверьте page-2.js и components > layout.css

...