create-react-appへstyled-componentsの提供

create-react-appシリーズ

このブログポストはシリーズで作成しております。次はcreate-react-appのシリーズのリストです。

Reactとは
create-react-app
create-react-appでTypeScriptを使う方法
[TypeScript] create-react-appで絶対パスのimport
create-react-appでstyled-componentsの使い方
Jest
create-react-appでreact-testing-libraryを使ってテストする

概要

このブログポストではReactプロジェクトへstyled-componentsを適用する方法について説明します。

styled-components: https://styled-components.com/

このブログポストで使ってソースコードはTypeScriptが適用されたソースコードを使う予定です。

ここで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-create-react-app/tree/main/3.styled-components

プロジェクト生成

次のコマンドを使ってReactプロジェクトを生成します。

npx create-react-app my-app --template=typescript

そして次のコマンドを使ってReactプロジェクトを実行します。

# cd my-app
npm start

問題なくReactプロジェクトが実行されたら下記の画面をブラウザで確認できます。

styled-componentsのインストール

create-react-appで生成したReactプロジェクトへstyled-componentsを適用するため必要なライブラリをインストールする必要があります。下記のコマンドを使ってstyled-componentsへ必要なライブラリをインストールします。

npm install --save styled-components

そして私はReactプロジェクトへTypeScriptを使っているので、下記のコマンドを使ってstyled-componentsのタイプやテストの必要なライブラリをインストールします。

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

使い方

次はstyled-componentsを使って簡単なコンポーネントを作ってみます。./src/App.tsxファイルを開いて下記のように修正します。

import React from 'react';
import Styled from 'styled-components';

const Container = Styled.div`
  background: red;
  width: 100%;
`;
const Label = Styled.div`
  color: white;
  padding: 20px;
`;

const App = () => {
  return (
    <Container>
      <Label>Hello World</Label>
    </Container>
  );
}

export default App;