Гэтсби Текущий Цвет Связи

Question

Я новичок в Gatsby, JS и реагирую, но я пытаюсь создать сайт в меру своих возможностей.До сих пор я был в состоянии понять большинство вещей с помощью смеси уроков по Гэтсби и CSS.Тем не менее, я застрял на одном небольшом изменении, которое я хотел бы сделать.На моем веб-сайте есть заголовок со ссылками навигации, которые я добавил с помощью ListLink

const ListLink = props =>
<li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to} style={{ fontSize: '17px', textTransform: 'uppercase', fontFamily: 'Roboto-Thin', textShadow: `none`, margin: "0", color: '#4a71b6', backgroundImage: `none`}}>
        {props.children}
    </Link>
</li>

. Мне бы хотелось, чтобы текущая ссылка была другого цвета, поэтому, если вы находитесь на странице "Продукт", ссылка на «Продукт» оранжевая, а не синяя.Я не уверен, как реализовать это с помощью ListLink

Answer 1

Вы можете передать activeClassName или activeStyle всем ссылкам, и они будут применены, если это текущая страница

 const ListLink = props =>
   <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to} className="link" activeClassName="current">
      {props.children}
    </Link>
   </li>

Answer 2

Нельзя добавлять встроенные стили непосредственно в компонент React.<Link> Гэтсби на самом деле <a>.Один из простых способов сделать это - присвоить className компоненту страницы «Продукт», который содержит ваш <ListLink />.Таким образом, предполагая, что имя класса компонента вашей страницы равно .product, в вашем отдельном CSS вы можете оформить ссылки следующим образом:

  .product li a {
      font-zize: 17px; 
      text-transform: uppercase; 
      font-family: 'Roboto-Thin'; 
      text-shadow: none; 
      margin: 0; 
      color: #4a71b6; 
      backgroundImage: none;            
   }