Next.js: 链接为样式化组件

在 Chrome 中使用没有href属性的a标签时，我遇到了确切的问题。 它不是链接样式，也没有常规链接的浏览器可访问性功能。 有效的是在a标签上使用空的href 。

也在经历这个。

对于解决方法 最好再次包含 href 而不是空白。 如果仅用于浏览器 url 预览。

您可以将组件传递给 styledcomponents 而不是使用标签
https://github.com/styled-components/styled-components#third -party-components

import Link from 'next/link'
const StyledLink = styled(Link)`
  color: red;
  background: blue;
`

用它

export default () => (<div><StyledLink href="mylink">MyText</StyledLink></div>)

谢谢@kennylavender ，会试试的！

@sedubois有效果吗？ 您不能将 className 传递给链接，所以我认为它不会起作用

@luisrudge还没有尝试过，现在解决方法已经足够好了，我会再试一次，看看我是否可以直接使用 styled-jsx ......

如果您确认它不起作用，请告诉我并且可以重新打开它。

@sedubois我可以确认@kennylavender的解决方案不起作用。 我建议重新打开这个问题。

可以发出拉取请求以允许 nextjs 链接组件支持此功能，或者您可以创建自己的版本 nextjs 链接组件，该组件可与样式化组件一起使用。 不看链接代码，听起来就像它没有将任何道具传递给锚元素。

您可以通过导入nextjs 路由器创建自己的，然后允许 styledcomponents 设置组件样式https://www.styled-components.com/docs/basics#styling -any-components

这是一个简单的例子，我只是直接在这里写了这段代码，没有测试过，所以只是作为一个例子。

// my-app-link.js
import React from 'react'
import PropTypes from 'prop-types' // Import this from react if your using an older version.
import Router from 'next/router'

const handler = (href) => Router.push(href);

const Link = ({className, children, href, ...rest}={}) => (
  <a onClick={() => handler(href)} className={className} {...rest} >{children}</a>
);

Link.propTypes = {
  className: PropTypes.string,
  href: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
  ]),
  children: PropTypes.node,
}

export default Link;

很好的方法@kennylavender ，但我认为这还不够好，因为您没有渲染href属性（您正在使用onClick事件）。 那么...这种方法对 SEO 有多好？ 其他选择？

它只是一个例子，你应该更进一步。 您可以而且绝对应该在我发布的代码之上添加一个 href 属性。 看看 nextjs/link 是如何实现的，以了解如何做到这一点。

大家好。 在版本3.0.1-beta.13+ ，您可以将passHref设置为Link （作为布尔属性）以将其href公开给styled-components （或包装其的任何其他库） <a/>标签）。

使用问题的第一个示例：可以这样做：

const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) => (
  <Link prefetch href={href} passHref>
    <StyledLink>{name}</StyledLink>
  </Link>
)

仅供参考：如果您使用的是next-routes ，它将如下所示：

export default ({route, params, children}) => (
  <Link route={route} params={params} passHref>
    <StyledLink>{children}</StyledLink>
  </Link>
)

改进的@vjpr解决方案，直接绕过className属性到我们的Link以便我们可以在正确的范围内扩展它们的样式：

链接.js

export default ({ route, params, children, className }) => (
  <Link route={route} params={params} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
)

另一个组件.js

import Link fron 'components/Link';

const RedLink = styled(Link)`
  background-color: red;
`

@torresandres的一个稍微改进的版本，对组件内的链接进行样式化，因此我们不必在每个导入Link的组件中创建样式化组件。

链接.js

const StyledLink = styled.a`
  //styles
`
export default ({ route, params, href, children, className }) => (
  <Link route={route} params={params} href={href} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
);

另一个组件.js

<Link href="/">Login</Link>

className不能作为 Link 的道具有什么具体原因吗？ 我很想做一个公关来补充这一点，但我认为必须有一个不允许这样做的原因。

找到了答案！
https://github.com/zeit/next.js/pull/1642#issuecomment -292431043

对于人们如何想用 styled-components 改变 Link 的样式

const LinkItem = styled(Link)`
// your style
`;

那么你可以像这样使用<LinkItem to="/yourComponent">somthing</LinkItem>

我花了一些时间来解决这个问题，所以我会写一个 TLDR 👇

TLDR将passHref添加到您的<Link>标记中，并在其中包含您想要的样式组件

实际例子
在父组件中：

<Link href="/login" passHref>
          <TopbarLink>Login</TopbarLink>
</Link>

在定义 TopbarLink 的样式化组件文件中：

export const TopbarLink = styled.a`
// your style
`;

@ferrucc-io 您的示例将锚点包装在锚点中。 而且通常您可能需要定位链接。 这带来了最初的问题，因为它是被样式化的内部问题。