样式化组件-组件位于Nextjs中

rqqzpn5f  于 2023-01-20  发布在  其他
关注(0)|答案(4)|浏览(200)

我正在设置一个简单的Nextjs样板文件,但似乎无法使样式化组件工作。

// 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。

// 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;

显然我做错了什么,因为它是不工作,所有我得到它一个无风格的链接。有人能指出我在正确的方向吗?

v8wbuo2f

v8wbuo2f1#

对于任何人看到这一点,并有类似的问题,看看这个:https://github.com/zeit/next.js/issues/1942#issuecomment-313925454
解决了我的问题。
在www.example.com +版本中3.0.1-beta.13,你可以将passHref设置为Link(作为一个布尔属性),以将其href暴露给样式化组件(或者任何其他 Package 其标记的库)。

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

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

对于使用next-routes的人,GitHub问题有解决方案。

yrdbyhpb

yrdbyhpb2#

您需要将this.props.className传递到Header的根元素中,以便样式化 Package 器可以将生成的类名传递到:

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

iyfamqjs3#

    • TL; DR:**

在您的/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()
    }
  }
}
    • 如果您希望样式化组件在每个页面/组件上自动工作**,您"可以创建一个ServerStyleSheet并向React树添加一个提供者,该提供者通过上下文API接受样式。"在Nextjs中,您可以通过将其添加到_document.js文件中来实现这一点......

如果您点击以下链接,您可以了解更多信息:
1.样式组件:SSR文件
1.下一页:客户呈现页
谢天谢地,已经有了一个工作示例,您可以使用来自样式化组件人员自己的示例!
点击这里查看:https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js

xam8gpfp

xam8gpfp4#

我不知道这是否是您要搜索的内容,但样式化Next Link非常简单

import Link from 'next/link'

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

然后用它来

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

相关问题