【styled-components, React】styled-componentsを用いて、CSSの記述を行う。

概要

こんにちは！今日はstyled-componentsの使い方について説明します！
これを用いることでjavascript内にCSSを記述することができるようになります。
余計にCSSファイルを作る必要がなくて楽なのと、CSSを作用させる対象が記述されているファイルに書くので、どのCSSがどこに適用されているかが分かりやすくなります。

使い方

CSSの記述

（例）

const TitleStyle = styled.h1`
  color: #fff;
  border-radius: 100vh;
  background-color: black;
  font-size: 100px;
  position: absolute;
  height: 150px;
  width: 800px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 40%;
  margin: auto;
`;

このようにして記述を行います。styled.使いたいタグの名前として上げることで新たなタグを生成することができます。
好きなCSSを自由に記述できるようになります。

HTML部分の記述

（例）

return(
・・・
<TitleStyle>タイトル名をここに書く！</TitleStyle>
・・・
)

このように先ほど宣言した定数名をタグにすることで、指定したCSSが適用されているh1タグとして利用できます。

余談

これを用いるとCSSの記述が簡単になります。またstyled.sectionを用いてタグを新しく作ってあげると