Стилизация делает NavLink "неуправляемым" в реакции

Question

Я пытаюсь стилизовать navbar-реактив-дом-навигацию NavLink. Я сделал это несколькими разными способами, но в любом случае, какой бы путь я ни выбрал, NavLink станет "не щелкающим" - это будет красиво оформленное поле, которое не будет перемещаться по клику. Вот несколько способов сделать это:

Один из способов, которые я попробовал, - это создание гламурных коробок css с тестами по клику. Это предпочтительный метод, который я хочу использовать, потому что он позволит мне стилизовать hover и другие псевдоэлементы. Я попробовал следующее безуспешно. Эти два глэм-элемента просто стилизованы. Я был обеспокоен тем, что, поскольку navlink был скрыт в элементе div, он находился "под" элементом, поэтому я попытался установить zIndex=999 для Navlink и zIndex=1 для глэм-элементов (а также установить относительное и абсолютное позиционирование)., и я также попытался установить pointerEvents = 'none' для глэм-элементов, чтобы вы могли "кликнуть" по ссылке навигации.

стиль:

const NavGlam = glamorous.div(
  {
    display: 'flex',
    flexDirection: 'row',
    position: 'relative',
    width:'100%',
    pointerEvents: 'none',
    listStyle: 'none',
    zIndex: '1',
    fontWeight: 'bolder',
    backgroundColor: 'purple',
  }
);

const NavGlamLi = glamorous.div(
  {
    display: 'flex',
    flex:'1',
    position:'relative',
    fontWeight: 'bolder',
    zIndex: '1',
    alignItems: 'center',
    verticalAlign: 'center',
    pointerEvents: 'none',
    textAlign: 'center',
    padding: '10px',
    margin: '10px'
  },
  ({clicked})=>({
    backgroundColor:clicked==='true'?`tomato`:`black`,
    color:clicked==='true'?`white`:`orange`
  })
);

Ссылка в рендере:

<NavGlam>
  <NavGlamLi clicked={this.props.clicked==='home'?`true`:`false`}>
     <NavLink to="/home" exact activeClassName="active">Home</NavLink>
  </NavGlam>
</NavGlam>

Еще один способ, которым я пытался это сделать (как хакерство), заключался в создании функции в классе и отправке таким образом событий click. Здесь стиль будет только для navlink, поэтому не должно быть никаких проблем с кликом, но опять же, щелчок не работает!

функция:

  navfunk(clicked){
    if (clicked==='true'){
      return(
        {
          display: 'flex',
          flex:'1',
          fontWeight: 'bolder',
          alignItems: 'center',
          verticalAlign: 'center',
          pointerEvents: 'none',
          textAlign: 'center',
          padding: '10px',
          margin: '10px',
          backgroundColor: 'tomato',
          color: 'white',
          textDecoration: 'none'
        }
      )
    }else{
      return(
        {
          display: 'flex',
          flex:'1',
          fontWeight: 'bolder',
          alignItems: 'center',
          verticalAlign: 'center',
          pointerEvents: 'none',
          textAlign: 'center',
          padding: '10px',
          margin: '10px',
          backgroundColor: 'black',
          color: 'orange',
          textDecoration: 'none'
        }
      )
    }
  }

И ссылка:

</NavGlam>
  <NavLink style={this.navfunk(this.props.clicked==='about'?`true`:`false`)}   to="/about" activeClassName="active">About</NavLink>
</NavGlam>

Что работает, так это когда я просто помещаю ссылки NavLinks в styleled-компонент, как это:

import styled from 'styled-components'

const Nav = styled.nav`
  display: flex;
  list-style: none;
  > :not(:first-child) {
    margin-left: 1rem;
  }
  a {
    font-weight: 300;
    color: ${palette('grayscale', 5)};
    font-size: 1.25rem;
    &.active {
      color: ${palette('grayscale', 5)};
    }
  }
`

  <Nav>
    <NavLink  to="/home" exact activeClassName="active">Home</NavLink>
  <Nav>

Но styled-компоненты не имеют хорошей поддержки псевдоэлементов (УТОЧНЕНИЕ: метод &.active выше не работает), поэтому я не хочу использовать это. Есть ли кто-нибудь, кто может сказать мне, почему мои блестящие примеры CSS не работают?

Answer 1

У меня была точная проблема со стандартным Link

Ваша проблема в этой линии

const NavGlam = glamorous.div(

Вы не хотите создавать DIV. У Glamorous есть несколько методов, некоторые из которых специфичны для точных элементов, например

glamorous.h1 , glamorous.p , glamorous.input, glamorous.select ....

Что вы хотите сделать, это:

Гламурный файл стиля

import g from 'glamorous';
import { Link } from 'react-router-dom'; // or NavLink

export const StyledLink = g(Link)({
  textDecoration: 'none',
  .... other styles .....
});

А затем импортировать в ваш компонент

import { StyledLink } from './style'; // your Glamorous style file

И используя как обычную ссылку, Glamorous с ее импортом заботится о том, чтобы преобразовать ее в обычную ссылку, придать ей стиль и сделать свою магию

<StyledLink to="/contact">Contact page</StyledLink> // standard usage

Надеюсь это поможет. Удачи:)

Answer 2

Вы подаете заявку pointer-events: none на ваш <NavGlamLi /> элемент. Ваш <NavLink /> Ваш ребенок <NavGlamLi />, Все, что является потомком элемента с указателем-событиями: ни один, также не получит события указателя.

Вам также не нужно включать activeClassName="active" потому что это настройка по умолчанию <NavLink />

Проверьте это, чтобы прочитать о значениях указателя-события.