ReactでのStyled Componentsによるスタイリング

これまでのレッスンでは、グローバルCSSと インラインスタイリングを使用したスタイリング手法を 検討しました。このレッスンでは、大規模なアプリケーションに より効果的なアプローチ、つまり styled-componentsライブラリの使用について 取り組みます。

では、前回のレッスンで使用した CSSスタイルのないコンポーネントを 取り上げましょう：

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

まず、Styled Componentsライブラリを インストールします：

terminalnpm install --save styled-components

次に、必要なパッケージをAppコンポーネントに インポートします：

App.jsimport styled from 'styled-components';

これで、タグをスタイルでラップし、 それをReactコンポーネントとして使用できるようになりましたが、 スタイルはJSに直接付属しています。 このアプローチはCSS in JSとも呼ばれます。

最初の段落をスタイリングしましょう。そのために、 App関数の前、インポート行の後に コンポーネントText1を作成します。ライブラリの styledオブジェクトには段落が必要なので、 styled.pと書きます。次に、 テンプレートリテラル内で必要なCSSスタイルを 通常のCSSのように列挙します：

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

ご覧の通り、ここではテンプレートリテラルとして 純粋なCSSを使用しており、非常に便利です。 同様に、メディアクエリ、疑似要素、 セレクタ、その他のCSS機能を使用できます。

次に、Appコンポーネント関数内で pタグを、作成したCSSスタイル付きのコンポーネント Text1に置き換えます：

App.js<Text1>text</Text1>     

同様に、2番目と3番目の段落を スタイリングします。そのために コンポーネントText2 とText3を作成します：

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

最後に、divを スタイリングします。そのためにコンポーネントを作成し、 Containerと名付けます：

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

すべてのタグを作成した コンポーネントに置き換えます：

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>text</Text1>
      <Text2>text</Text2>
      <Text3>text</Text3>
    </Container>
  );
}

このアプローチにより、 スタイル付きの再利用可能な コンポーネントを作成できます。

ブラウザの開発者パネルで生成されたマークアップを 開くと、各コンポーネントに独自のユニークな クラスが生成されていることがわかります。 これにより、個々のコンポーネント間の クラスの衝突を心配する必要がなくなります。

同様に、例えばEmotion ライブラリを使用してコンポーネントを スタイリングすることもできます。