Укладка ссылок в реакцию

Question

Я пытаюсь понять, как стилизовать ссылки в реакции.

Я видел этот пост и перепробовал большинство его предложений.

Я определил класс стиля нижнего колонтитула как:

.footerlinks {
    a:link {color: $Hand3};
    font-weight: 300;
    font-family: $secondary-font;
    a:link {text-decoration:none; background-color:transparent; color: #FAF5F2;};
    a:visited {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    a:hover {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    a:active {text-decoration:none;background-color:transparent; color:#FAF5F2;};
    color: $Hand3;
}

Тогда у меня есть ссылка в нижнем колонтитуле:

<Link to={'/about'} className="footerlinks">About</Link>

Поле css 'color' применяется, но ни одна из ссылок тега не работает. Когда вы наводите курсор на ссылку, она подчеркивается синим цветом. Инспектор CSS показывает, что webkit был применен неправильно, за исключением указателя.

Что за хитрость заключается в стилизации тегов в реакции?

Answer 1

Если вы хотите напрямую применить css к реактивным ссылкам, у вас есть другая опция,

Вы можете использовать <NavLink> вместо <Link>

<NavLink 
   className="CssClassForNormalLinks" 
   activeClassName={location.pathname !== "your pathname"? null : "CssClassForActiveLinks"}
   to="/home"
   >
   HOME
</NavLink>

Answer 2

Должен работать так же, как с обычными HTML и CSS.Предполагая, что вы используете реагирующий маршрутизатор или аналогичный, Link должен сгенерировать тег a.

Я думаю, проблема в том, где вы поместили класс.CSS ожидает компонент с классом footerlinks, за которым следует элемент a внутри.

Попробуйте изменить код на:

<div className="footerlinks">
  <Link to={'/about'}>About</Link>
</div>