styled components

はじめに

本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。

書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。

Styled Componentsは、ReactのためのCSS-in-JSライブラリです。

コンポーネント内でスタイルを定義し、動的なスタイリングを行うことができます。

import styled from 'styled-components';

一般的にはstyledという名前でインポートされますが、これはあくまで慣例です。

styled以外の名前を使用することも可能です。

例えば、以下のように異なる名前でインポートすることもできます。

import customName from 'styled-components';

const CustomStyledComponent = customName.div`
  /* スタイルの定義 */
`;

styled-componentsでは、インポートしたstyledオブジェクトのプロパティに要素名を指定し、その後のテンプレートリテラル内にCSSスタイルを記述します。

// button要素をスタイル付きコンポーネントとして定義
const Button = styled.button`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
`;

先程定義したstyledコンポーネントを以下のように指定することでbutton要素に指定したCSSがコンポーネントに囲った要素に付与されます。

const App = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
};

本記事の内容は以上になります！

書籍の続きのアウトプットも随時更新したいと思います。

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。