Nextjs 中帶有組件的樣式化組件

Question

我正在設置一個簡單的 Nextjs 樣板文件，但似乎無法讓樣式化組件工作。 在我的文件 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;

顯然我做錯了什么，因為它不起作用，我得到的只是一個無樣式的鏈接。 誰能指出我正確的方向？

Answer 1

對於看到此問題並有類似問題的任何人，請查看此內容： https ://github.com/zeit/next.js/issues/1942#issuecomment-313925454

解決了我的問題。

大家好。 在版本 3.0.1-beta.13+ 中，您可以將 passHref 設置為 Link（作為布爾屬性）以將其 href 公開給樣式化組件（或包裝其標簽的任何其他庫）。

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

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

GitHub 問題中有針對使用next-routes的人的解決方案。

Answer 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>
        );
    }
}

Answer 3

長話短說：

在您的/pages文件夾中創建一個_document.js文件並將其粘貼進去。它應該會立即運行

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：客戶渲染頁面

值得慶幸的是，您已經可以使用來自樣式化組件人員的工作示例！

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

Answer 4

我不知道這是否是您要搜索的內容，但設置下一個鏈接的樣式非常簡單

import Link from 'next/link'

const StyledLink = styled(Link)`
    text-decoration: none;
    color: white;
`

然后像這樣使用它

<StyledLink href={route.path}>
    {route.name}
</StyledLink>