React でスタイル付きコンポーネントを使用する方法

React を使用する場合、スタイルをグローバル CSS ファイルに保存するのが一般的です。これにより、特に大規模なプロジェクトで作業している場合に、特定のコンポーネントのスタイルを見つけるのが難しくなる可能性があります。スタイル付きコンポーネントを使用すると、コンポーネントと同じファイルにあるため、特定のコンポーネントのスタイルを簡単に見つけることができます。

React アプリケーションでスタイル付きコンポーネントをセットアップして統合する方法を見てみましょう。

styled-components ライブラリのインストール

ターミナルで次のコマンドを実行して、styled-components をインストールできます。

npm i styled-components


yarn を使用して styled-components をインストールするには、次を実行します。

yarn add styled-components


スタイル付きコンポーネントの作成

スタイル付きコンポーネントは、スタイルを備えた標準の React コンポーネントと同じです。スタイル付きコンポーネントにはさまざまな長所と短所があり、正しく使用するために考慮することが重要です。

一般的な構文は次のようになります。

import styled from "styled-components";


const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`


ここでは、 styled-componentライブラリからstyledをインポートします。スタイル付き関数は、JavaScript コードを実際の CSS に変換する内部メソッドです。ComponentNameは、スタイル付きコンポーネントの名前です。DOMElementTagは、div、span、button など、スタイルを設定する予定の HTML/JSX 要素です。

スタイル付きコンポーネントを使用してスタイル付きボタンを作成するには、最初にボタン要素を含む React コンポーネントを作成します。

そのようです：

import React from "react";


function Button() {
    return (
        <button>Welcome!!!</button>
    )
}


styled-components を使用してボタンのスタイルを作成できるようになりました。

import styled from "styled-components";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

すべてをまとめると、ボタンタグをStyledButtonコンポーネントに置き換える必要があります。

import styled from "styled-components";
import React from "react";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}


ネスティング スタイル

スタイル付きコンポーネントを操作するときに、スタイルをネストすることもできます。スタイル付きコンポーネントのネストは、SASS/SCSS 拡張言語の使用に少し似ています。コンポーネントに複数の要素タグが含まれていて、各タグを個別にスタイルしたい場合は、スタイルをネストできます。

例えば：

import React from 'react';


function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}


このコードは、 h1要素とp要素を含むコンポーネントを作成します。

スタイル付きコンポーネントのネストされたスタイリング機能を使用して、これらの要素のスタイルを設定できます。

import React from 'react';
import styled from 'styled-components';


const StyledApp = styled.div`
    color: #333333;
    text-align: center;

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}


このコードは、スタイル設定されたコンポーネントを使用し、 h1タグとpタグのスタイルをネストします。

変数の作成と使用

変数を作成する機能は、styled-components ライブラリの注目すべき機能です。この機能により、JavaScript 変数を使用してスタイルを決定できる動的なスタイリングが可能になります。

styled-components で変数を使用するには、変数を作成し、それに CSS プロパティ値を割り当てます。次に、その変数を CSS で直接使用できます。次に例を示します。

import styled from "styled-components";


const MainColor = "red";

function App() {
    return (
        <>
            <Heading>Hello World!</Heading>
        </>
    );
}


上記のコード ブロックでは、テキスト「Hello World! 」が赤色で表示されます。

この例では、スタイル付きコンポーネントと組み合わせて、テンプレート リテラルで標準の JavaScript 変数を使用しているだけであることに注意してください。これは、CSS 変数を使用するのとは異なるアプローチです。

スタイルの拡張

スタイル付きコンポーネントを作成したら、そのコンポーネントを利用します。場合によっては、微妙な違いを加えたり、スタイルを追加したりすることもできます。このような場合、スタイルを拡張できます。

スタイルを拡張するには、 styled()コンストラクターでスタイル付きコンポーネントをラップしてから、追加のスタイルを含めます。

この例では、PrimaryButtonコンポーネントは Button コンポーネントのスタイルを継承し、異なる背景色の青を追加します。

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}


をプロパティとして使用して、スタイル付きコンポーネントがレンダリングするタグを変更することもできます。

as prop を使用すると、スタイル付きコンポーネントがレンダリングされる基になる HTML/JSX 要素を指定できます。

例えば：

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}


このコードは、Buttonコンポーネントをa要素としてレンダリングし、そのhref属性を「#」に設定します。

グローバル スタイルの作成

スタイル設定されたコンポーネントは通常、コンポーネントにスコープが設定されているため、アプリケーション全体をどのようにスタイル設定すればよいのか疑問に思うかもしれません。グローバル スタイリングを使用して、アプリケーションのスタイルを設定できます。

Styled-Components は、スタイルをグローバルに宣言できるようにするcreateGlobalStyle関数を提供します。createGlobalStyleは、コンポーネント スコープのスタイル設定の制約を取り除き、すべてのコンポーネントに適用されるスタイルを宣言できるようにします。

グローバル スタイルを作成するには、 createGlobalStyle関数をインポートし、必要なスタイルを宣言します。

例えば：

import {createGlobalStyle} from 'styled-components';


const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

export default GlobalStyles;


次に、 GlobalStylesコンポーネントをアプリ コンポーネントにインポートしてレンダリングします。アプリ コンポーネントでGlobalStylesコンポーネントをレンダリングすると、スタイルがアプリケーションに適用されます。

そのようです：

import React from 'react';
import GlobalStyles from './Global';


function App() {
    return (
        <div>
            <GlobalStyles />
        </div>
    )
}


スタイル付きコンポーネントの詳細

React アプリケーションで styled-components をセットアップ、インストール、および使用する方法を学びました。styled-components ライブラリは、React アプリケーションをスタイリングする効率的な方法です。スタイリングの柔軟性と動的なスタイリングを可能にする多くの便利な機能を提供します。

アニメーションなどのスタイル付きコンポーネントには他にもたくさんの機能があり、React はそれ以外にも学ぶべきことがたくさんある大きなフレームワークです。