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

2021-01-21 hit count image

create-react-appで生成したReactプロジェクトでstyled-componentsを適用する方法について説明します。

create-react-appシリーズ

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

概要

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

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

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

プロジェクト生成

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

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

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

# cd my-app
npm start

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

create-react-app with styled-components

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;

上のようにstyled-componentsを使ってJSXファイルで直接スタイルを作成することができます。

そしてもう使わないファイルは削除します。

  • App.css
  • logo.svg

他の使い方は公式サイトを参考して下さい。

完了

このブログポストではcreate-react-appを使って生成したReactプロジェクトへstyled-componentsを適用する方法についてみてみました。そして簡単にJSXファイルでstyled-componentsを使う方法についてもみてみました。

皆さんも今度JSXファイルを使ってstyled-componentsを使ってスタイリングをやてみて下さい。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts