javascript - 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

解决了我的问题。

Hey guys. At version 3.0.1-beta.13+, you could set passHref to Link (as a boolean property) to expose its href to styled-components (or any other library that wraps its tag).

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

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

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