Gatsby 如何创建在activeClassName中使用的CSS类

我正在尝试使用生成的CSS类为导航栏中的活动链接设置样式

该样式未应用于活动链接，我收到一个控制台错误：

Warning: Failed prop type: Invalid prop `activeClassName` of type `object` supplied to `GatsbyLink`, expected `string`.

---

如何使用带有

activeClassName

的情感样式？

我认为

activeClassName

只需要一个字符串，但是您是否尝试使用

activeStyle

而不是

activeClassName

？

不幸的是，您不能使用

从“@Emotion/core”

导入{css}，而是需要使用

import { cx, css } from 'emotion'

const activeLink = css`
  color: red;
`
<Link activeClassName={cx(activeLink)} to="/contact/">Contact</Link>

从“情感”导入{cx，css}
常量activeLink=css`
颜色：红色；
`
接触

我希望这对你有帮助

或者，您可以使用样式化元素来实现这一点

import styled from '@emotion/styled'

const NavLink = styled(Link)`
  &.active {
    color: red;
  }
`
<NavLink activeClassName='active' to="/contact/">Contact</NavLink>

import styled from'@emotion/styled'
const NavLink=已设置样式（链接）`
&.主动{
颜色：红色；
}
`
接触

您可以像这样使用@emotion/core中的

组件：

import {ClassNames, css} from '@emotion/core'

const activeLink = css`
  color: red;
`

const Component = () => {
  <ClassNames>
    {({css}) => (
      <NavLink activeClassName={css(activeLink)} to="/">Home</NavLink>
    )}
  </ClassNames>
}

从'@emotion/core'导入{ClassNames，css}
常量activeLink=css`
颜色：红色；
`
常量组件=（）=>{
{（{css}）=>(
家
)}
}

这里很少有黑客攻击：

import styled from '@emotion/styled'

const NavLink = styled(Link)`
  &.active {
    color: red;
  }
`
<NavLink activeClassName='active' to="/contact/">Contact</NavLink>

import {ClassNames, css} from '@emotion/core'

const activeLink = css`
  color: red;
`

const Component = () => {
  <ClassNames>
    {({css}) => (
      <NavLink activeClassName={css(activeLink)} to="/">Home</NavLink>
    )}
  </ClassNames>
}