React Изменить цвет панели навигации на определенной странице с помощью React Helmet?

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

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

         const Layout = ({ children }) => {
      return (
        <>
          <Helmet bodyAttributes={{ class: "image-page" }} />
          <Navbar />
          <main>{children}</main>
          <Footer />
        </>
      )
    }

reactjs gatsby react-helmet
person designxd10    schedule 17.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы сделать ваши чеки.

Внутри вашего <Navbar> компонента вам нужно будет получить location через props и добавить к нему имя класса, если оно соответствует странице ваших служб. Должно получиться так:

const Navbar= ({ location }) => {
  return <div className={`${location.pathname === /services/} ? 'whiteClassName': 'regularClassName'`}>Your navbar content</div>
}

Точно так же, как вы деструктурируете children в компоненте <Layout>, вы можете сделать то же самое с location. Поскольку это значение по умолчанию prop, оно будет доступно везде. Как только у вас есть ваше текущее местоположение, вам нужно только добавить настраиваемый класс, если он соответствует условию вашего элемента и сделает ваш CSS волшебным.

person Ferran Buireu    schedule 17.09.2020
comment
как мне это сделать со стилизованными компонентами? Я знаю, как добавить имя класса при изменении события, но это не имеет смысла для стилизованных компонентов - person designxd10; 17.09.2020
comment
props такие location точно так же доступны в styled-components. Предоставьте свой <Navbar> компонент или добавьте ту же логику в свой стилизованный компонент, но вместо изменения имени класса добавьте свою логику стиля. - person Ferran Buireu; 18.09.2020
comment
но у меня уже есть тернар на моей навигационной панели для изменения цвета при прокрутке, поэтому я не могу добавить к нему еще один класс - person designxd10; 18.09.2020
comment
Как мы можем это предположить без кода? Кодируйте это код, конечно, всегда есть решение. Например, вы всегда можете связать троичные файлы (не рекомендуется, потому что делает код менее читаемым) или вы можете визуализировать другой компонент Navbar с собственными стилями. - person Ferran Buireu; 18.09.2020