Javascript 在Nextjs中使用组件的样式化组件

我正在设置一个简单的Nextjs样板文件，但似乎无法让样式化的组件正常工作。在my file 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;

//核心模块导入
从“下一个/链接”导入链接；
从“React”导入*作为React；
//样式化组件导入
导入样式来自“./theme/theme”；
类头扩展了React.Component{
render（）{
返回(
关于我们
);
}
}
const StyledHeader=styled（头）`
宽度：100vw；
高度：10vh；
背景#2a2c39；
颜色：#ff0000；
链接样式：无；
`;
导出默认样式头；

如您所见，我设置了一个简单的头组件，然后在下面使用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;

//核心模块导入
从“React”导入*作为React；
从“./组件/标题”导入样式标题；
类索引扩展了React.Component{
render（）{
返回(
测试变更

示例Div
);
}
}
出口违约指数；

---

很明显，我做错了什么，因为它不起作用，我得到的只是一个没有样式的链接。有人能给我指出正确的方向吗？

您需要将

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

类头扩展React.Component{
render（）{
返回(
关于我们
);
}
}

对于任何看到此问题并有类似问题的人，请查看以下内容：

修正了我的问题

嘿，伙计们。在3.0.1-beta.13+版本中，您可以将passHref设置为Link（作为布尔属性），以将其href公开给样式化组件（或包装其标记的任何其他库）

const StyledLink=styled.a`
颜色：红色；
背景：蓝色；
`
导出默认值（{href，name}）=>(
{name}
)

---

GitHub问题中有一些解决方案可供使用

下一条路线的人使用；医生：

在
/pages
文件夹中创建一个
\u document.js
文件，并将其粘贴到中。当我这样做时，它应该立即工作，因为我得到一个[ts]错误，该错误为：“属性'className'在类型'Readonly&Readonly'上不存在。”我不确定该错误是什么。我没有太多打字经验。你也可以试试
，我猜这与typescript处理道具类型的方式有关。您可能必须将
className
声明为
Header
的道具。我不确定做这件事的正确方法是什么。好的，我会试着回去报告。谢谢找到答案并将其张贴在上面。谢谢你的贡献！
const StyledLink = styled.a`
  color: red;
  background: blue;
`

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