Question

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

<Link activeClassName={activeLink} to="/contact/">Contact</Link>

我已经在同一文件中定义了样式。

import { css } from '@emotion/core'

const activeLink = css`
  color: red;
`

样式未应用于活动链接，并且出现控制台错误：

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

如何在activeClassName中使用情感风格？

Answer 1

不幸的是，您不能使用import { css } from '@emotion/core'，而需要使用

import { cx, css } from 'emotion'

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

希望对您有所帮助。

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

import styled from '@emotion/styled'

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

Answer 2

我认为activeClassName仅需要一个字符串，但是您是否尝试使用activeStyle而不是activeClassName吗？

Answer 3

您可以像这样使用@ emotion / core中的<ClassNames/>组件：

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

const activeLink = css`
  color: red;
`

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

如何创建要在activeClassName

3 个答案: