【React】スタイルの扱い方

はじめに

Reactのスタイルの扱い方についてまとめてみました。私のプロジェクトではCSS Modulesを使うことが多いです。CSS Modulesは、今までのCSSの書き方と同じように書くことができます。

Inline Style

Reactでも各タグにstyle属性を記述することで、スタイルの適用をすることができます。JavaScriptで記述するので、style={}のように波括弧で囲み、その中にオブジェクトでCSSに対応する要素を指定しているため、style={{}}と記載します。

App.jsx

//文字を赤色に変更
export const App = () => {
  return (
    <>
      <h1 style={{ color: "red" }}>こんにちは</h1>
    </>
  );
};

index.html

import ReactDom from "react-dom";
import { App } from "./App";

ReactDom.render(<App />, document.getElementById("root"));

事前に定義する場合

App.jsx

  const contentStyle = {
    color: "blue",
    fontSize: "100px",
  };
  return (
    <>
      {console.log("a")}
      <h1 style={{ color: "red" }}>こんにちは</h1>
      <p style={contentStyle}>よろしくおねがいします。</p>
    </>
  );
};

index.html

import ReactDom from "react-dom";
import { App } from "./App";

ReactDom.render(<App />, document.getElementById("root"));

CSS Modulesを使う場合

はじめにパッケージをインストールします。私の環境がnode14なので、node14に対応したnode-sassを入れます。

terminal

$ node -v                                                                         
v14.17.6
$ yarn add node-sass@4.14.1

.module.scssという拡張子で、CSSファイルを作成します。

CssModules.module.scss

.title {
  margin: 0;
  color: red;
}
.button {
  background-color: #ddd;
  border: none;
  padding: 8px;
  border-radius: 8px;
  &:hover {
    background-color: #aaa;
    color: blue;
    cursor: pointer;
  }
}

使うコンポーネントでimportします。

CssModules.module

import classes from "./CssModules.module.scss";

export const CssModules = () => {
  return (
    <>
      <p className={classes.title}>CSS Modulesです</p>
      <button className={classes.button}>ボタン</button>
    </>
  );
};