Nextjs 中带有组件的样式化组件
Styled-components with components in 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;
显然我做错了什么,因为它不起作用,我得到的只是一个无样式的 link。谁能指出我正确的方向?
您需要将 this.props.className
传递到 Header
的根元素中,以便样式化包装器可以传递生成的 class 名称:
class Header extends React.Component {
render() {
return (
<div className={this.props.className}>
<Link href="/about">
<a>About Us</a>
</Link>
</div>
);
}
}
对于看到此问题并遇到类似问题的任何人,请查看以下内容:
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
的人的解决方案。
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()
}
}
}
如果您希望 styled-components 在每个 page/component 上自动工作,您“可以创建一个 ServerStyleSheet 并向您的 React 树添加一个提供者,即通过上下文 API 接受样式。”在 Nextjs 中,您可以通过将其添加到 _document.js
文件中来实现...
如果您点击以下链接,您可以阅读更多内容:
谢天谢地,styled-components 人已经提供了一个可用的示例!
在这里查看:https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
我正在设置一个简单的 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;
显然我做错了什么,因为它不起作用,我得到的只是一个无样式的 link。谁能指出我正确的方向?
您需要将 this.props.className
传递到 Header
的根元素中,以便样式化包装器可以传递生成的 class 名称:
class Header extends React.Component {
render() {
return (
<div className={this.props.className}>
<Link href="/about">
<a>About Us</a>
</Link>
</div>
);
}
}
对于看到此问题并遇到类似问题的任何人,请查看以下内容: 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
的人的解决方案。
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()
}
}
}
如果您希望 styled-components 在每个 page/component 上自动工作,您“可以创建一个 ServerStyleSheet 并向您的 React 树添加一个提供者,即通过上下文 API 接受样式。”在 Nextjs 中,您可以通过将其添加到 _document.js
文件中来实现...
如果您点击以下链接,您可以阅读更多内容:
谢天谢地,styled-components 人已经提供了一个可用的示例!
在这里查看:https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js