ReactFelaを使用したコンポーネントのスタイリング

投稿日: 2022-04-20 2022-10-05
タグ: React

Reactのスタイリングには、さまざまな形とサイズがあります。箱から出して、を介してクラスを割り当てることができます className プロパティまたはオブジェクトをに渡すことによってCSSプロパティを割り当てる style 財産。ほとんどのシナリオで十分ですが、欠点がないわけではありません。作る classNames 動的には、追加のクラスを定義する必要があり、 styles、動的プロパティを許可する一方で、ボイラープレートコードが必要であり、次のような疑似クラスプロパティを深く掘り下げることはできません。 :hover. それは、フェラがあなたの救助に来ることができる場所です！

Fela は、JavaScriptで状態駆動型のスタイル設定を処理するためのフレームワークに依存しないライブラリです。パフォーマンスが高く、使用方法に関してある程度の柔軟性があります。 Felaを単独で使用することもできますが、 react-fela を使用して、React.jsアプリにReactバインディングを提供できます。

入門

開始するには、追加する必要があります react-fela 私たちのプロジェクトへ：

npm経由

$ npm install --save react-fela

または糸経由

$ yarn add react-fela

この記事では、からのいくつかの方法を使用します fela ライブラリを直接。でも心配しないでください、 react-fela この依存関係が含まれているので、うまくいくはずです。

レンダラー

約束通り、一部があります fela 使用する必要のあるライブラリ、それは createRenderer. The createRenderer メソッドは、渡されるレンダラーを作成するために使用されます Provider Felaを活用しているコンポーネントをラップアウトするコンポーネント。

以下のすべての例には、魔法を実現するために必要な定型コードが含まれています。

生成されたCSSクラスの使用

最も複雑でないFelaの例は理想的ではありませんが、ボイラープレートコードの量が最も少なくなっています。

Felaの仕組みは、スタイルを取得し、アトミッククラスを使用して適切なCSSを生成し、任意のコンポーネントに渡すことができるCSSクラスを取得できるようにすることです。 classNames 財産：

import React from "react";
import { render } from "react-dom";

import { createRenderer } from "fela";
import { Provider } from "react-fela";

const renderer = createRenderer();

const rule = ({
  backgroundColor = "#6db65b",
  borderColor = "#efbb35",
  padding
}) => ({
  backgroundColor: backgroundColor,
  border: `10px solid ${borderColor}`,
  color: "#fff",
  fontWeight: "bold",
  padding: `${padding}px`,
  ":hover": {
    cursor: "pointer",
    filter: "drop-shadow(0 10px 19px rgba(0, 0, 0, 0.3))"
  }
});

const container = document.createElement("div");
document.body.appendChild(container);
render(
  <Provider renderer={renderer}>
    <div className={renderer.renderRule(rule, { padding: 100 })}>
      Hover Over Me!
    </div>
  </Provider>,
  container
);

例でわかるように、 renderer 渡されるCSSプロパティのオブジェクトに基づいてCSSとクラス名を生成するために使用されます。

The rule は、渡された可能性のあるプロパティを含むすべてのプロパティを持つオブジェクトを返す単純な無名関数です。

なぜなら rule は単なるreturnオブジェクトを持つ関数であり、期待されるオブジェクトをすぐに返す代わりに、適切と思われる追加のロジックを拡張して含めることができます。

コンポーネントプリミティブの使用

前のアプローチは十分に機能しますが、プロジェクト全体で簡単に再利用できる新しいコンポーネントを作成すると便利な場合があります。

これらのシナリオでは、 FelaComponent 新しいコンポーネントを作成するためのプリミティブコンポーネント：

import React from "react";
import { render } from "react-dom";

import { createRenderer } from "fela";
import { FelaComponent, Provider } from "react-fela";

const renderer = createRenderer();

const rule = ({
  backgroundColor = "#6db65b",
  borderColor = "#efbb35",
  padding
}) => ({
  backgroundColor: backgroundColor,
  border: `10px solid ${borderColor}`,
  color: "#fff",
  fontWeight: "bold",
  padding: `${padding}px`,
  ":hover": {
    cursor: "pointer",
    filter: "drop-shadow(0 10px 19px rgba(0, 0, 0, 0.3))"
  }
});

const PaddedContainer = ({
  backgroundColor,
  borderColor,
  padding,
  children
}) => (
  <FelaComponent
    rule={rule}
    backgroundColor={backgroundColor}
    borderColor={borderColor}
    padding={padding}
  >
    {children}
  </FelaComponent>
);

const container = document.createElement("div");
document.body.appendChild(container);
render(
  <Provider renderer={renderer}>
    <PaddedContainer padding={100}>
      Hover Over Me!
    </PaddedContainer>
  </Provider>,
  container
);

同様の利用 rule、新しいものを作成することができます PaddedContainer オーバーヘッドやクラスの割り当てなしでプロパティを直接渡すことができるコンポーネント renderRule.

自分でコンポーネントを作成する

プリミティブを使用して新しいコンポーネントを作成することに問題はありませんが、コンポーネントを直接作成する場合よりも、ボイラープレートが少し多くなる傾向があります。

import React from "react";
import { render } from "react-dom";

import { createRenderer } from "fela";
import { createComponent, Provider } from "react-fela";

const renderer = createRenderer();

const rule = ({
  backgroundColor,
  borderColor,
  padding
}) => ({
  backgroundColor: backgroundColor,
  border: `10px solid ${borderColor}`,
  color: "#fff",
  fontWeight: "bold",
  padding: `${padding}px`,
  ":hover": {
    cursor: "pointer",
    filter: "drop-shadow(0 10px 19px rgba(0, 0, 0, 0.3))"
  }
});

const AnotherPaddedContainer = createComponent(rule);

const container = document.createElement("div");
document.body.appendChild(container);
render(
  <Provider renderer={renderer}>
    <AnotherPaddedContainer padding={100}>Hover Over Me!</AnotherPaddedContainer>
  </Provider>,
  container
);

プリミティブコンポーネントを使用した例と同じように、少しクリーンで再利用可能です。

結論

どのアプローチを採用するかに関係なく、 react-fela 作成する必要のある定型文の量を排除することで、Reactでコンポーネントを動的にスタイル設定するために必要な時間を短縮できます。

上記のコードサンプルの動作を確認するには、CodeSandboxにアクセスしてください。

楽しみ！

getdocs

13036