我正在设置一个简单的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;
显然我做错了什么,因为它是不工作,所有我得到它一个无风格的链接。有人能指出我在正确的方向吗?
4条答案
按热度按时间v8wbuo2f1#
对于任何人看到这一点,并有类似的问题,看看这个:https://github.com/zeit/next.js/issues/1942#issuecomment-313925454
解决了我的问题。
在www.example.com +版本中3.0.1-beta.13,你可以将passHref设置为Link(作为一个布尔属性),以将其href暴露给样式化组件(或者任何其他 Package 其标记的库)。
对于使用
next-routes
的人,GitHub问题有解决方案。yrdbyhpb2#
您需要将
this.props.className
传递到Header
的根元素中,以便样式化 Package 器可以将生成的类名传递到:iyfamqjs3#
在您的
/pages
文件夹中创建一个_document.js
文件并将其粘贴进去。它应该会立即工作😁_document.js
文件中来实现这一点......如果您点击以下链接,您可以了解更多信息:
1.样式组件:SSR文件
1.下一页:客户呈现页
谢天谢地,已经有了一个工作示例,您可以使用来自样式化组件人员自己的示例!
点击这里查看:https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
xam8gpfp4#
我不知道这是否是您要搜索的内容,但样式化Next Link非常简单
然后用它来