ReactにおけるCSSの設定方法（styled-components） - エンジニアを目指す日常ブログ

はじめに

今回の記事の目的

React機能の勉強メモ。Reactで作成するアプリにCSSを適用する方法のメモ。

はじめに
- 今回の記事の目的
ReactにCSSを設定する方法メモ①　styled-components
おわりに

ReactにCSSを設定する方法メモ①　styled-components

方法は3つほどあるらしいが、1番わかりやすい方法をいったんメモ。

インストールするパッケージ

styled-componentsをインストールする。

npm install styled-components

package.jsonには

"dependencies": {
　・・・
    "styled-components": "^5.3.1",
  },

このように記述が追加された。package-lock.jsonにも、

    "babel-plugin-styled-components": {
　・・・
      }

という記述が追加されていた。

アプリ上でインポートする。

.jsxファイルの上部に、

import styled from "styled-components";

を記載する。

コードの書き方

通常（CSS適用前）

まず、通常の書き方（styled-componentsを使わない）だと

export const Input = (props) => {
  return <input type="text"} />;
};

とか

export const Header = () => {
  return (
    <header>
      <Link to="/">HOME</Link>
    </header>
  );
};

となる。

styled-componentsを利用した書き方（CSS適用後）

1つめの例は

// importする
import styled from "styled-components";

// 元のコードの<input>を<SInput>（自分で命名）に書き換える
export const Input = (props) => {
  return <SInput type="text"} />;
};

// styled.input　と記載することでinputのスタイルにCSS設定を追加できる
const SInput = styled.input`
  border-radius: 9999px;
  outline: none;
`;

2つめの例は

import styled from "styled-components";

export const Header = () => {
  return (
    <SHeader>
      <Link to="/">HOME</Link>
    </SHeader>
  );
};

const SHeader = styled.header`
  background-color: #11999e;
`;

となる。

別で作ったコンポーネントに追加設定をする方法

先ほどはstyled.～の使い方だったが今度はstyled(～)の使い方。

もともとのHTMLの部品をもとに設定したい場合はstyled.～を利用し、既存のコンポーネントの場合はstyled(～)を利用する方針でよさそう。

こんな形で、ベースとなるbuttonのコンポーネントを作っておけば、

import styled from "styled-components";

export const BaseButton = styled.button`
  border: none;
  outline: none;
  border-radius: 9999px;
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
`;

別のコンポーネントで、styled(BaseButton)の記載で設定CSSを呼んでくることができる。あとは個別の設定だけ上書きできる。

export const myButton = (props) => {
  const { children } = props;
  return <SButton>{children}</SButton>;
};

// BaseButtonにCSSを上書きする書き方
const SButton = styled(BaseButton)`
  background-color: #eee;
`;

勉強に利用させていただいている講座
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 | Udemy