【簡単CSS】Styled JSXの実装方法

こんにちは、Totsukaと申します。
今回は、Styled JSXについて書きました。
※ここではReactでの開発を前提に書いています。

Styled JSXの実装方法
最後に

Styled JSXの実装方法

ReactのフレームワークのNext.jsに標準搭載されているCSS-in-JSと呼ばれるライブラリになります。
コンポーネント内にCSSを記述していき、CSSを適用させる方法になります。

Styled JSXでは、ターミナルや、コマンドプロンプトで以下のコマンドを実行してモジュールをインストールし、CSSを適用させるのでファイル管理が楽になります。

※注意点
また、Node.jsをインストールしていないと以下のコマンドは使用できません。
Node.jsのインストール方法はこちら←

// npmの場合
npm install styled-jsx

// yarnの場合
yarn add styled-jsx

Styled JSXでは以下のようにコンポーネント内でstyleタグを使用し、その中にCSSを記述し、CSSを適用させます。各タグにclassName=”クラス名”と記述します。

const App = () => {
    return (
        <>
            <div className="container">
                <p className="text">テキストテキスト</p>
            </div>

            <style jsx>{`
                .container {
                    border: solid 3px red;
                    border-radius: 50px;
                    margin: 20px;
                    padding: 20px;
                }
                .text {
                    color: red;
                    font-size: 20px;
                    text-align: center;
                }
            `}</style>
        </>
    );
};

実行結果は以下になります。