🎨

Reactのスタイリングガイド：Inline Style, CSS Modules編

2023/10/14に公開

React

Inline Styleについて

Inline Styleは
それぞれのタグにstyleを追加して、その中にJavaScriptののオブジェクトで書いたスタイルを配置することでCSSを適用していくやり方です。

通常のCSSとは違いオブジェクトで書いていくため、
background-colorのようなスネークケースではなく
backgroundColorのようにキャメルケースで書く必要があります。
また、「;」ではなく[,]で区切っていきます。

事前準備としてInlineStyleという名前のコンポーネントを作成します。

const InlineStyle = () => {
  return (
    <div>
      <p>- inline style -</p>
      <button>Hello World!</button>
    </div>
  )
}

export default InlineStyle

この状態から下ような見た目になるようにスタイルを書いていきましょう。

const InlineStyle = () => {
  // コンテナーのスタイルを書いていきます
  const containerStyle = {
    display: "flex",
    justifyContent: "space-around",
    alignItems: "center",
    borderRadius: "8px",
    padding: "16px",
    margin: "16px",
    boxShadow: "0 0 8px #aaa"
  };
  // タイトルのスタイルを書いていきます
  const titleStyle = {
    margin: "0",
    color: "skyblue"
  };
  // ボタンのスタイルを書いていきます
  const buttonStyle = {
    padding: "8px 16px",
    border: "none",
    borderRadius: "8px",
    outline: "none",
    color: "white",
    backgroundColor:"skyblue",
  };
  return (
    // 先ほど書いたスタイルを適用していきます
    <div style={containerStyle}>
      <p style={titleStyle}>- inline style -</p>
      <button style={buttonStyle}>Hello World!</button>
    </div>
  )
}

export default InlineStyle

注意点としてこの書き方は擬似要素(:hoverなど)が使えないため、さっくと書きたい時は使いますが基本的には以降で解説するやり方を使うようにしてください。

CSS modulesについて

CSS Modulesを使用する主な理由は、Reactで通常のCSSファイルを使用してスタイルを記述すると、コンポーネントとは関係なくグローバルに定義されてしまうためです。そのため、同じクラス名を使用すると、意図しないスタイルが適用されるなどの問題が発生する可能性があります。

しかし、CSS Modulesを使用すると、各コンポーネントごとにユニークなクラス名を自動的に生成してくれます。これにより、他のコンポーネントやCSSファイルとのクラス名の衝突を回避でき、意図しないスタイルが適用される問題を解決できます。

では、実際にコードを書いていく前に、事前準備として今回はSassも使っていきたいのでインストールしてください。

npm i sass

CSS Modulesはコンポーネントに対応するCSSファイルを用意し、それを読み込んでスタイルを適用していくものになります。下の画像のような見た目になるようにスタイルを当てていきましょう。

ファイル名を「付けたい名前.module.scss」にして作成してください。
先ほど書いたJavaScriptのスタイルを今度はCSSに書き換えましょう。

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
  padding: 16px;
  margin: 16px;
  margin-top: 64px;
  box-shadow: 0 0 8px #aaa;
}
.title {
  margin: 0;
  color: skyblue;
}
.button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  outline: none;
  color: white;
  background-color:skyblue;
  &:hover {
    background-color: lightblue;
    color: #333;
    cursor: pointer;
  }
}

次にコンポーネントにスタイルを適用していきます。
通常のコンポーネントと同様にインポートをして、今回は変数名をstylesとして読み込みます。
このstylesにスタイルの塊が入ってきます。
そして、タグにclassNameを追加し、styles.に続けて先ほどCSSで定義したクラス名を書いていきます。

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

const CssModules = () => {
  return (
    <div className={styles.container}>
      <p className={styles.title}>- CSS Modules -</p>
      <button className={styles.button}>Hello World!</button>
    </div>
  )
}

export default CssModules

CSS Modulesは、従来のCSSを書き方をそのまま使用できるため、CSSに慣れている方にとっては使いやすいと思います。

まとめ

この記事では、Reactアプリケーションでのスタイリングにおいて、Inline StyleとCSS Modulesという2つのアプローチに焦点を当てました。これらの方法はそれぞれ一定のメリットと制約がありますが、
筆者はCSS-In-JSを推奨しています。
CSS-In-JSを解説する記事も書いたので続けてこちらもお読みください。

Inline Styleについて

CSS modulesについて

まとめ

Discussion