CSS とスタイルの使用

CSS のクラスをコンポーネントに適用するにはどうすれば？

このようにクラス名を文字列として className プロパティに与えてください。

render() {
  return <span className="menu navigation-menu">Menu</span>
}

このようにコンポーネントの props や state の状態を元に CSS クラスを割り当てる方法もよく使用されています。

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

ヒント

もしあなたが上記のようなコードを書くことが多い場合、classnames という npm パッケージを使うことで簡略化できます。

インラインスタイルは使えますか？

はい、スタイルの書き方についてはこの資料をご覧ください。

インラインスタイルは悪なの？

パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりも優れています。

CSS-in-JS とは?

“CSS-in-JS” とは外部ファイルでスタイルを定義するのとは違い、JavaScript を用いて CSS を生成するパターンのことを指します。

注意：この機能は React の一部ではありません。サードパーティのライブラリ群により提供される機能です。React はスタイルがどのように定義されているかには関心を持ちません。判断に困った場合は、まずは別の *.css にスタイルを定義して、className を使って参照するところからはじめると良いでしょう。

React でアニメーションは使えますか？

React を使ってアニメーションを動かすことは可能です。例として、React Transition Group、React Motion、React Spring や Framer Motion をご覧ください。