Zenn
Open2

styled-componentの実装メモ

CSS
JavaScript
styled-components
shunshun

styled-componentsとは

  • CSS in JSと呼ばれるライブラリ
  • JS/TSのコード、HTMLタグ、スタイルを１つのコンポーネントにまとめ、効率的に管理できるようになる

Next.jsで使ってみる

前準備

  • インストール

    npm install --save styled-components
npm install --save-dev @types/styled-components

  • next.config.js に設定を追加

    /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    styledComponents: true, // この設定を追加
  }
}
module.exports = nextConfig

  • pages/_document.tsx を作り、以下を記載

    import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

// デフォルトのDocumentをMyDocumentで上書き
export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    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();
    }
  }
}
shunshun

使い方

  • 例えば、pages/index.tsxに追加してみる

    styled.要素名`スタイル`

    という文法で各要素のスタイルを設定できる。

    import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import styled from "styled-components";

const H1 = styled.h1`
  color: red;
`;

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <H1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </H1>
      ...省略...
      </main>
      <footer className={styles.footer}>
      ...省略...
      </footer>
    </div>
  );
};

export default Home;