styled-components

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

styled-componentsとは？

CSS in JSのライブラリの一つです。CSS in JSとはその名の通りJSの中にスタイルを記述する方法。

このCSS in JSを使うことでReact思想のコンポーネント単位での管理がスタイルにも可能になります。
CSSファイルを作成して別のファイルで記述する必要がなく、CSSと同じ表現力でスタイルを定義できます。

styled-componentsインストール方法

styled-componentsパッケージをインストールします。

npm install --save styled-components

型定義

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

記述

styled-componentsを使ってコンポーネントを実装するには、次の書式で指定します。

styled.要素名`スタイル`

例

import styled from "styled-components"

export default function Home() {
  //タイトル
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;

  //ラッパー
  const Wrapper= styled.section`
    padding: 4em;
    background: papayawhip;
  `;

  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );
}