3

我正在尝试设置 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>

我尝试做的另一种方法（作为一种技巧）是在类中创建一个函数并以这种方式通过点击事件发送。这里的样式只能在 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>

但是，styled-components 对伪元素没有很好的支持（澄清： &.active 方法在上面不起作用），所以我不想使用它。有谁可以告诉我为什么我迷人的 css 示例不起作用？

4

2 回答 2

3

我对标准链接有确切的问题

你的问题是这条线

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

希望这可以帮助。祝你好运 ：）

于 2017-10-31T09:40:27.910 回答
0

您适用pointer-events: none于您的<NavGlamLi />元素。你<NavLink />是你的孩子<NavGlamLi />。任何具有“指针事件：无”的元素的子元素也不会接收指针事件。

您也不需要包含 ，activeClassName="active"因为这是 a 的默认设置<NavLink />

查看此内容以了解指针事件值。

于 2017-07-23T15:45:09.207 回答