使用React Fela样式化组件

Styling in React comes in all shapes and sizes. Out of the box, you can assign classes via the className property or assign CSS properties by passing an object to the style property. While sufficient enough in most scenarios, they are not without their shortcomings. Making classNames dynamic requires defining additional classes, and styles, while allowing dynamic properties, still requires boilerplate code and doesn’t allow you dig deep into pseudo-class properties like :hover. That’s where Fela can come to your rescue!

React中的样式有各种形状和大小。 开箱即用，您可以通过className属性分配类，也可以通过将对象传递给style属性来分配CSS属性。 尽管在大多数情况下足够了，但并非没有缺点。 使classNames动态化需要定义其他类和styles ，同时允许动态属性，仍然需要样板代码，并且不允许您深入研究伪类属性，如:hover 。 这就是Fela可以为您解救的地方！

Fela is a framework-agnostic library for handling state-driven styling in JavaScript. It’s highly performant and gives you some flexibility in regard to how you use it. While you can use Fela by itself, react-fela is available to provide React bindings for your React.js apps.

Fela是一个框架无关的库，用于处理JavaScript中状态驱动的样式。 它具有很高的性能，并为您提供了一些使用方式上的灵活性。 虽然您可以单独使用Fela，但react-fela可用于为React.js应用程序提供React绑定。

入门 (Getting Started)

To get started, we need to add react-fela to our project:

首先，我们需要在项目中添加react-fela ：

通过npm (Via npm)

$ npm install --save react-fela

或通过纱线 (Or via Yarn)

$ yarn add react-fela

For this article we will be using some methods from the fela library directly. Don’t worry though, react-fela includes this dependency so we should be good to go.

对于本文，我们将直接使用fela库中的一些方法。 不过请不要担心， react-fela包含了这种依赖关系，所以我们应该很好。

渲染器 (The Renderer)

As promised, there is a part of the fela library that we will need to use, that’s createRenderer. The createRenderer method is used to create a renderer that will be passed a Provider component that will wrap out components that are leveraging Fela.

如所承诺的，我们将需要使用fela库的一部分，即createRenderer 。 createRenderer方法用于创建渲染器，该渲染器将传递给Provider组件，该组件将包装利用Fela的组件。

All of the following examples will include the boilerplate code that we need to make the magic happen.

以下所有示例都将包含实现魔术所需的样板代码。

使用生成CSS类 (Using Generated CSS Classes)

The least complex Fela example isn’t ideal but does have the least amount of boilerplate code.

最简单的Fela示例不是理想的，但样例代码最少。

The way Fela works is that it takes your styles, generates the appropriate CSS with atomic classes and allows you to grab the CSS classes that can be passed to any component’s classNames property:

Fela的工作方式是采用样式，使用原子类生成适当CSS，并允许您获取可传递给任何组件的classNames属性CSS类：

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
);

As you can see in the example, the renderer is used to generate our CSS and class names based on the object of CSS properties being passed-in.

如示例所示， renderer用于根据传入CSS属性的对象生成CSS和类名。

The rule is just a simple anonymous function that returns an object with all of our properties including any properties that may have been passed-in.

该rule只是一个简单的匿名函数，它返回一个具有我们所有属性的对象，包括可能已传入的所有属性。

Because rule is just a function with a return object, you could expand and include additional logic as you see fit instead of immediately returning the expected object.

因为rule只是带有返回对象的函数，所以您可以扩展并包含您认为合适的其他逻辑，而不是立即返回期望的对象。

使用组件基元 (Using Component Primitives)

While the previous approach works well enough, sometimes it’s nice to create a new component that could easily be reused throughout your project.

尽管先前的方法效果很好，但有时创建一个易于在整个项目中重复使用的新组件还是不错的。

In those scenarios, we can leverage the FelaComponent primitive component to create a new component:

在这些情况下，我们可以利用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
);

Utilizing a similar rule, we are able to create a new PaddedContainer component that we can pass properties to directly without the overhead and assigning classes via renderRule.

利用类似的rule ，我们能够创建一个新的PaddedContainer组件，该组件可以直接将属性传递给而不产生开销，并可以通过renderRule分配类。

自己创建组件 (Creating Components Yourself)

There’s nothing wrong with using primitives to create new components, but you tend to wind up with a bit more boilerplate than you would by creating components directly:

使用基元创建新组件并没有错，但是与直接创建组件相比，最终可能会花费更多的样板：

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
);

A bit cleaner and just as reusable as our example with primitive components!

就像我们的原始组件示例一样，它更加干净并且可重用！

结论 (Conclusion)

Regardless of which approach you take, leveraging react-fela can speed up the time necessary to dynamically style components in React by eliminating the amount of boilerplate you have to write.

无论您采用哪种方法，利用react-fela都可以消除您必须编写的样板react-fela从而加快在React中动态设置组件样式所需的时间。

To see the code samples above in action, head over to CodeSandbox.

要查看上面的代码示例，请转到CodeSandbox 。

Enjoy!

请享用！

翻译自: https://www.digitalocean.com/community/tutorials/react-styling-with-react-fela