いうライブラリを使用したスタイルの設定方法を解説します。TypeScriptでお送りします。一つ目はHTMLタグのスタイル属性に直接書くインラインスタイルの設定方法です。通常のHTMLコーディングはちょっと邪道っぽくてあまり使わないかもしれませんが、Reactアプリケーションのサンプルとかには結構使われています。JSXでインラインスタイルを設定する場合は、JavaScriptのオブジェクト形式で記述します。JSXで式や変数を表示する場合は波括弧({})で囲み、スタイルはオブジェクトで記述するのでさらに波括弧で囲みます。h1の文字色を赤にする場合は次のようになります。スタイル設定</h1></div>もう一つ項目を追加してみましょう。今度は文字サイズです。注意するところはしつこいですがオブジェクト形式なので、プロパティの繋ぎは「,」でプロパティ名は「-(ハイフン)」は使えないので、キャメルケースで記述します。文字サイズはfont-sizeなので、この場合はfontSizeとなります。それとサイズは数値で指定した場合は「px」が自動的に付きます。スタイル設定</h1></div>設定したスタイルは普通のオブジェクトなので、一度変数に入れてから使うこともできます。普通のHTMLだとCSSは外部ファイルで作って読み込んでクラスで設定するというのが一般的ですよね。Reactでもこの方法は使えますが、やっぱりちょっとだけ違います。App.cssファイルを作り、titleクラスを作ります。}このファイルを読み込むにはインポートで読み込みます。hrefでも大丈夫です。)そしてJSXでクラスを指定する場合は、JavaScriptではclassは予約語なので使えません、classNameを使います。)}クラスの切り替えただスタイルを設定するだけではつまらないので、JavaScript特有のイベントによってクラスを切り替えるということをやってみましょう。タイトルをクリックすると文字色を切り替えてみます。スタイルを追加します。is-blueを指定すると青色になるように設定しました。}新しくStateを設定して、classNameの部分を切り替えます。「`」(バッククオート)を使うと、「${}」で囲むだけで式や変数を表示できるのでシンプルに書けます。いうライブラリを使用したスタイルの設定方法をご紹介します。GitHubで(2019年12月)現在27kスターという結構メジャーなライブラリです。このライブラリを使うとスタイル専用のコンポーネントを作成して、スタイルを設定することになり今までとは少し違った組み方が必要になります。実際使ってみたほうが早いので、簡単なサンプルを作ってみましょう。npmでライブラリをインストールします。styled-componentsここではバージョン4.4.1を使用します。TypeScriptの場合は型定義もインストールしましょう。@types/styled-componentsスタイルの設定は「styled.タグ名」でタグ名を指定します。その次に「`」で囲み通常のスタイルと同じように記述します。h1タグの文字を赤にしたい場合は次のようになります。red;`これでTitleコンポーネントとして使用することができます。次に「blue」というPropsで文字色を青に変更できるようにしてみましょう。cssをインポートして、Propsのtypeを設定します。boolean}三項演算子でblueが指定されたときに青色になるように設定するには下記のようになります。''}`これでJSXでTitleコンポーネントでPropsを指定できるようになりました。スタイル設定</Title></div>最後にクラスの切り替えと同じように、Propsをクリックイベントで切り替えるように設定してみます。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。