JSXファイル内でのCSS記述 Styled-components

はじめに

時間割アプリの開発にあたってReactでのCSSの適用方法を理解したので、そちらをまとめていきます。
CSSを記述する方法はいくつかありますが、今回はコンポーネントベースで管理しやすいStyled-componentsについて解説します。

ReactでのCSS適用方法の種類

• CSS Modules:
  単純なスタイル定義や、CSSの知識をそのまま活かしたい場合。
• Styled-components/Emotion:
  動的なスタイルや、コンポーネントベースでスタイルを厳密に管理したい場合。
• Inline Styles:
  少量の動的なスタイル変更が必要な場合。
• Sass (SCSS):
  ネストや変数など、高度なCSS機能を必要とする場合。

Styled-componentsとは

Styled-componentsは、CSSをJavaScript内で宣言的に書けるライブラリのこと。
コンポーネントごとにスタイルを定義し、直接それに適用できる。
コンポーネント単位でスタイルが分離され、再利用性が高いことがメリット。
〈使用場面〉
・コンポーネント単位でスタイルを完全に管理したい場合
・動的にスタイルを変更する必要がある場合

Styled-componentsの使い方

1.Styled-componentsをインストール

npm install styled-components

2.スタイルをReactコンポーネント内で定義
スタイルが必要なHTMLタグに対して、関数コンポーネントを定義し置き換えていく。
``でスタイル部分を囲うことで、本来のCSSと同じ記法で記述が可能。
また、SCSSのようにネストすることもできる。

import styled from 'styled-components';

// Styled-componentsでCSSを記述
const Header = styled.header`
  height: 100%;
  background-color: #2C65C7;
  padding: 38px 40px;
`;

const HeaderSchoolList = styled.div`
  display: flex;
  justify-content: space-between;
`;

const HeaderSchoolLeft = styled.ul`
  display: flex;
  width: 100%;
`;

const HeaderSchoolName = styled.li`
  display: flex;
  background-color: #fff;
  align-items: center;
  max-width: 100px;
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 14px;
  border-radius: 2px;
  margin-right: 20px;

  &:last-of-type {
    margin-right: 0;
  }

  img {
    width: 16px;
    height: 18px;
    margin-inline: 10px;
  }

  p {
    margin-right: 3px;
  }
`;

// コンポーネント
export const AppHeader = () => {
  return (
    <Header>
      <HeaderSchoolList>
        <HeaderSchoolLeft>
          <HeaderSchoolName>
            <img src="/images/school.png" alt="校舎イラスト" />
            <p>北28条</p>
          </HeaderSchoolName>
          <HeaderSchoolName>
            <img src="/images/school.png" alt="校舎イラスト" />
            <p>南平岸</p>
          </HeaderSchoolName>
        </HeaderSchoolLeft>
        <HeaderSchoolName>
          <img src="/images/school.png" alt="校舎イラスト" />
          <p>山の手</p>
        </HeaderSchoolName>
      </HeaderSchoolList>
    </Header>
  );
};

さいごに

以上、Styled-componentsライブラリによるCSSの記述方法でした。
コンポーネントごとに分けてスタイルを適用できる点が、個人的には良かったです。

時間割アプリで使用した他の機能はこちら