how to using styled-components with Next.js All In One

how to using styled-components with Next.js All In One

styled-components

$ npm i -S styled-components
# OR
$ yarn add styled-components

plugin

$ npm i -D babel-plugin-styled-components
# OR
$ yarn add -D babel-plugin-styled-components

https://styled-components.com/

https://github.com/styled-components

https://github.com/styled-components/babel-plugin-styled-components

error

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_5__.span is not a function

solution

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,
    },
  },
}

https://styled-components.com/docs/tooling#babel-plugin

https://github.com/vercel/next.js/issues/30802

next.config.js

module.exports = {
  compiler: {
    styledComponents: true,
  },
}

module.exports = {
  compiler: {
    styledComponents: {
      displayName: true,
    },
  },
}

https://nextjs.org/docs/advanced-features/compiler#styled-components

CJS ✅

{
-   "type": "module",
+  "type-bug": "module",
}

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true,
  },
}

// CJS ✅
module.exports = nextConfig

https://nextjs.org/docs/advanced-features/compiler#styled-components

https://github.com/vercel/next.js/issues/30802#issuecomment-1334185894

demos

https://nextjs.org/docs/api-reference/next/link#if-the-route-has-dynamic-segments

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

範例

with-styled-components

https://github.com/vercel/next.js/tree/canary/examples

https://github.com/vercel/next.js/tree/canary/examples/with-typescript-styled-components

TS & CJS ✅ & no need babel plugin

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/package.json#L18

@types/styled-components

https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
}

// CJS ✅
module.exports = nextConfig

https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/styled.d.ts

import 'styled-components'

declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      primary: string
      secondary: string
    }
  }
}

babel & need babel plugin

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel

babel-plugin-styled-components & @types/styled-components

https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-babel/package.json#L19

https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-babel/.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["styled-components"]
}

CJS & LTR

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-rtl

https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-rtl/next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
}
// CJS
module.exports = nextConfig

(🐞 反爬蟲測試！打擊盜版⚠️）如果你看到這個信息, 說明這是一篇剽竊的文章，請訪問 https://www.cnblogs.com/xgqfrms/ 查看原創文章！

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 發佈文章使用：只允許註冊用戶纔可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---