Nextjs中包含组件的样式组件

时间:2018-03-14 23:01:58

标签: javascript reactjs typescript styled-components nextjs

我正在设置一个简单的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;

显然我做错了,因为它不起作用,所有我都把它弄成了一个没有风格的链接。有人能指出我正确的方向吗?

3 个答案:

答案 0 :(得分: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>
        );
    }
}

答案 1 :(得分:0)

对于任何看到此问题且有类似问题的人,请查看以下内容: https://github.com/zeit/next.js/issues/1942#issuecomment-313925454

解决了我的问题。

答案 2 :(得分:0)

TL; DR:

在您的_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()
    }
  }
}

如果您希望样式化的组件在每个页面/组件上自动工作,则可以“创建ServerStyleSheet并将其添加到您的React树中,以通过上下文API接受样式。”在Nextjs中,您可以将其添加到_document.js文件中...

如果您遵循以下链接,则可以阅读更多内容:

  1. Styled-Components: SSR Documentation
  2. Nextjs: Customer Render Page

值得庆幸的是,您已经可以从人们自己的样式化组件中使用一个有效的示例!

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