how to using styled-components with Next.js All In One
<h1 id="how-to-using-styled-components-with-nextjs-all-in-one">how to using styled-components with Next.js All In One</h1><h2 id="styled-components">styled-components</h2>
<pre><code class="language-sh">$ npm i -S styled-components
# OR
$ yarn add styled-components
</code></pre>
<blockquote>
<p>plugin</p>
</blockquote>
<pre><code class="language-sh">$ npm i -D babel-plugin-styled-components
# OR
$ yarn add -D babel-plugin-styled-components
</code></pre>
<p>https://styled-components.com/</p>
<p>https://github.com/styled-components</p>
<p>https://github.com/styled-components/babel-plugin-styled-components</p>
<h2 id="error">error</h2>
<p><code>TypeError: styled_components__WEBPACK_IMPORTED_MODULE_5__.span is not a function</code></p>
<p><img src="https://img2023.cnblogs.com/blog/928074/202212/928074-20221202015406675-455934727.png" alt="" loading="lazy"></p>
<h2 id="solution">solution</h2>
<pre><code class="language-js">module.exports = {
compiler: {
// see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
styledComponents: boolean | {
// Enabled by default in development, disabled in production to reduce file size,
// setting this will override the default for all environments.
displayName?: boolean,
// Enabled by default.
ssr?: boolean,
// Enabled by default.
fileName?: boolean,
// Empty by default.
topLevelImportPaths?: string[],
// Defaults to ["index"].
meaninglessFileNames?: string[],
// Enabled by default.
cssProp?: boolean,
// Empty by default.
namespace?: string,
// Not supported yet.
minify?: boolean,
// Not supported yet.
transpileTemplateLiterals?: boolean,
// Not supported yet.
pure?: boolean,
},
},
}
</code></pre>
<p>https://styled-components.com/docs/tooling#babel-plugin</p>
<p>https://github.com/vercel/next.js/issues/30802</p>
<p><code>next.config.js</code></p>
<pre><code class="language-js">module.exports = {
compiler: {
styledComponents: true,
},
}
</code></pre>
<pre><code class="language-js">module.exports = {
compiler: {
styledComponents: {
displayName: true,
},
},
}
</code></pre>
<p>https://nextjs.org/docs/advanced-features/compiler#styled-components</p>
<blockquote>
<p>CJS✅</p>
</blockquote>
<pre><code class="language-diff">{
- "type": "module",
+"type-bug": "module",
}
</code></pre>
<pre><code class="language-js">/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
compiler: {
styledComponents: true,
},
}
// CJS ✅
module.exports = nextConfig
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/740516/202212/740516-20221202025503343-594614238.png" alt="image" loading="lazy"></p>
<p>https://nextjs.org/docs/advanced-features/compiler#styled-components</p>
<p>https://github.com/vercel/next.js/issues/30802#issuecomment-1334185894</p>
<h2 id="demos">demos</h2>
<p>https://nextjs.org/docs/api-reference/next/link#if-the-route-has-dynamic-segments</p>
<pre><code class="language-jsx">import Link from 'next/link'
import styled from 'styled-components'
// This creates a custom component that wraps an <a> tag
const RedLink = styled.a`
color: red;
`
function NavLink({ href, name }) {
return (
<Link href={href} passHref legacyBehavior>
<RedLink>{name}</RedLink>
</Link>
)
}
export default NavLink
</code></pre>
<h2 id="范例">范例</h2>
<p>with-styled-components</p>
<p>https://github.com/vercel/next.js/tree/canary/examples</p>
<p><s>https://github.com/vercel/next.js/tree/canary/examples/with-typescript-styled-components</s></p>
<blockquote>
<p>TS&CJS ✅ & no need babel plugin</p>
</blockquote>
<p>https://github.com/vercel/next.js/tree/canary/examples/with-styled-components</p>
<p>https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/package.json#L18</p>
<p><code>@types/styled-components</code></p>
<p>https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/next.config.js</p>
<pre><code class="language-js">/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true,
},
}
// CJS ✅
module.exports = nextConfig
</code></pre>
<p>https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/styled.d.ts</p>
<pre><code class="language-ts">import 'styled-components'
declare module 'styled-components' {
export interface DefaultTheme {
colors: {
primary: string
secondary: string
}
}
}
</code></pre>
<blockquote>
<p>babel & need babel plugin</p>
</blockquote>
<p>https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel</p>
<p><code>babel-plugin-styled-components</code>& <code>@types/styled-components</code></p>
<p>https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-babel/package.json#L19</p>
<p>https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-babel/.babelrc</p>
<pre><code class="language-js">{
"presets": ["next/babel"],
"plugins": ["styled-components"]
}
</code></pre>
<blockquote>
<p>CJS & LTR</p>
</blockquote>
<p>https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-rtl</p>
<p>https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-rtl/next.config.js</p>
<pre><code class="language-js">/** @type {import('next').NextConfig} */
const nextConfig = {
compiler: {
styledComponents: true,
},
}
// CJS
module.exports = nextConfig
</code></pre>
<h2 id="--反爬虫测试打击盗版️如果你看到这个信息-说明这是一篇剽窃的文章请访问-httpswwwcnblogscomxgqfrms-查看原创文章"><div id="anti-crawler" style="color: rgba(255, 0, 0, 1)"> (🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！</div></h2>
<h2 id="refs">refs</h2>
<p>https://github.com/vercel/next.js/issues/30802#issuecomment-1334185894</p>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2021</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/16943239.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/16943239.html
頁:
[1]