Styling macht NavLink 'unclickable' in reagieren

Question

Ich versuche, eine react-router-dom NavLink Navbar zu stylen. Ich habe es ein paar verschiedene Wege gegangen, aber in jedem Fall, egal wie ich es wählen werde, wird das NavLink "unclickable" machen - es wird eine schön gestylte Box sein, die nicht auf einen Klick navigiert. Hier sind ein paar Möglichkeiten, die ich darüber gegangen bin:

Eine Möglichkeit, die ich ausprobiert habe ist glamouröse CSS-Boxen mit angeklickt Tests gemacht. Dies ist die bevorzugte Methode, die ich arbeiten möchte, weil ich damit Hover und andere Pseudo-Elemente stylen kann. Ich habe Folgendes ohne Erfolg versucht. Diese zwei Glam-Elemente sind nur divs gestylt. Ich war besorgt, weil der Navlink in einem Div vergraben war, war es 'unterhalb' des Elements, also habe ich sowohl zIndex = 999 für den Navlink als auch zIndex = 1 für die Glam-Elemente (sowie relative und absolute Positionierung) gesetzt , und ich habe auch versucht, pointerEvents = 'none' für die Glam-Elemente zu setzen, damit Sie durch den Navigationslink "klicken" können.

Styling:

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` 
    }) 
); 

Links in Render:

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

Einen anderen Weg, die ich versuchte, es zu tun (als ein bisschen ein Hack), war eine Funktion in der Klasse zu erstellen und Senden Sie die Click-Ereignisse auf diese Weise. Hier wäre das Styling nur auf Navlink, also hätte es keine Klickprobleme geben sollen, aber das Klicken funktioniert nicht!

Funktion:

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' 
     } 
    ) 
    } 
    } 

Und der Link:

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

Was bedeutet Arbeit ist, wenn ich die NavLinks in einem Stil-Komponente so sagen nur:

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> 

Aber , styled-components haben keine gute Unterstützung für Pseudo-Elemente (CLARIFICATION: & .active m ethod funktioniert nicht im oben genannten), also möchte ich das nicht benutzen. Gibt es jemanden, der mir sagen kann, warum meine glamourösen CSS-Beispiele nicht funktionieren?

Answer 1

Sie sind pointer-events: none zu Ihrem <NavGlamLi /> Element. Ihr <NavLink /> ist ein Kind Ihrer <NavGlamLi />. Alles, was ein Kind eines Elements mit 'Zeiger-Ereignisse: keine' ist, erhält auch keine Zeiger-Ereignisse.

Sie brauchen auch nicht die activeClassName="active" enthalten, weil das die Standardeinstellung eines dieser <NavLink /> ist

prüfen über pointer-event Werte auszulesen.

Answer 2

hatte ich das genaue Problem mit Standard-Link-

Ihr Problem ist diese Linie

const NavGlam = glamorous.div(

Sie wollen nicht DIV erstellen. Glamorous hat mehrere Methoden, einige von ihnen sind spezifisch für exakte Elemente, z.

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

Was möchten Sie tun, ist dies:

Glamorous Stildatei

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

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

und importieren Sie dann in Ihrer Komponente

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

und die Verwendung als regelmäßige Verbindung, Glamorous mit seinem Import kümmert sich darum, es in reguläres Link zu verwandeln, ihm Stil zu geben und seine Magie zu tun

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

Hoffe das hilft. Viel Glück :)