Closed3

StoryBook / styled-component

marushomarusho

styled-componentの導入

styled-components: Basics
Next.jsにstyled-componentsを取り込む方法【Babelの設定が必要】

Next.jsで動いているので、この辺りを参考に。

yarn add styled-components

動作確認で背景を真っ黒にしてみる

pages/index.ts
import styled from "styled-components";

const Wrapper = styled.section`
    background: black;
  `;

const Home = (): JSX.Element => (
  <Wrapper>
    // ....
  </Wrapper>
)

Babelの設定

SSRを利用しているので、サーバーサイドでstyled-componentが動くように設定が必要

.babelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
      }
    ],
    "inline-react-svg" // SVGファイルを使うための設定
  ]
}
このスクラップは2022/06/05にクローズされました