Question

我正在尝试设置react-router-dom NavLink导航栏的样式。我已经采用了几种不同的方式，但在每种情况下，我选择的任何方式都会使NavLink“无法点击” - 它将是一个风格不错的盒子，不会在点击上导航。以下是我采用的几种方式：

我尝试过的一种方法是使用点击测试制作迷人的CSS框。这是我想要工作的首选方法，因为它允许我设置悬停和其他伪元素的样式。我尝试了以下但没有成功。这两个华丽的元素只是风格的div。我担心因为navlink被埋在一个div中，它位于元素的“下方”，所以我尝试为navlink设置zIndex = 999，为glam元素设置zIndex = 1（以及设置相对和绝对定位），我也尝试为glam元素设置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放在像这样的样式组件中时，有什么用呢：

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>

但是，样式组件对伪元素没有很好的支持（CLARIFICATION：＆amp; .active方法在上面不起作用），所以我不想使用它。有没有人可以告诉我为什么我的迷人css例子不起作用？

Answer 1

我遇到标准链接的确切问题

你的问题就在这一行

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

使用常规链接，迷人的导入会将其转换为常规链接，赋予其风格并实现其魔力

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

希望这会有所帮助。祝你好运:)

Answer 2

您将pointer-events: none应用于<NavGlamLi />元素。您的<NavLink />是您<NavGlamLi />的孩子。

您也不需要添加activeClassName="active"，因为这是<NavLink />

的默认设置

请查看此内容，了解pointer-event值。

样式化使NavLink“无法点击”反应

2 个答案: