3

我正在设置一个简单的 Nextjs 样板，但似乎无法让 styled-components 工作。在我的文件 Header.tsx 中：

// Core Module Imports
import Link from "next/link";
import * as React from "react";

// Styled-Component Imports
import styled from "../theme/theme";

class Header extends React.Component {
    render() {
        return (
            <div>
                <Link href="/about">
                   <a>About Us</a>
                </Link>
            </div>
        );
    }
}

const StyledHeader = styled(Header)`
    width: 100vw;
    height: 10vh;
    background: #2a2c39;
    color: #ff0000;
    link-style: none;
`;

export default StyledHeader;

如您所见，我设置了一个简单的 Header 组件，然后在下面我使用 styled() 来定义我的 css。在我的文件 Index.tsx 中：

// Core Module Imports
import * as React from "react";

import StyledHeader from "../components/Header";

class Index extends React.Component {
    render() {
        return (
            <div>
                <StyledHeader />
                <p>Test Change</p>
                <div>Example Div</div>
            </div>
        );
    }
}

export default Index;

显然我做错了什么，因为它不起作用，我得到的只是一个无样式的链接。谁能指出我正确的方向？

4

3 回答 3

2

您需要传递this.props.className到的根元素，Header以便样式化包装器可以传递生成的类名：

class Header extends React.Component {
    render() {
        return (
            <div className={this.props.className}>
                <Link href="/about">
                   <a>About Us</a>
                </Link>
            </div>
        );
    }
}
于 2018-03-14T23:15:24.123 回答
2

对于看到此并有类似问题的任何人，请查看： https ://github.com/zeit/next.js/issues/1942#issuecomment-313925454

修复了我的问题。

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

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

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

GitHub 问题中有针对使用next-routes.

于 2018-03-15T18:01:48.273 回答
1

TL;博士：

_document.js在您的文件夹中创建一个文件/pages并将其粘贴进去。它应该立即工作

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

如果您希望 styled-components 在每个页面/组件上自动工作，您“可以创建一个 ServerStyleSheet 并向您的 React 树添加一个提供程序，它通过上下文 API 接受样式。” 在 Nextjs 中，您可以通过将其添加到_document.js文件中来实现...

如果您点击以下链接，您可以了解更多信息：

  1. 样式化组件：SSR 文档
  2. Nextjs：客户呈现页面

值得庆幸的是，已经有一个工作示例，您可以从 styled-components 人员自己那里使用！

在这里查看：https ://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js

于 2020-09-09T05:41:40.367 回答