在前端开发中，CSS 是一个非常重要的部分。但是，CSS 语言存在一些问题，如全局作用域、重复的代码等。解决这些问题的一种方式是使用 CSS-in-JS 技术。
react-hey-fela 是一个基于 Fela 的 React 组件库，提供了一些便捷的工具来使用 CSS-in-JS 技术。本篇文章将提供 react-hey-fela 的详细使用教程，包括基础概念、API 和示例代码。
基础概念
在使用 react-hey-fela 之前，我们需要了解一些基础概念。
Fela
Fela 是一种 CSS-in-JS 库，它允许将样式作为函数（而不是字符串）定义，并自动将它们转换为 CSS。通过 Fela，我们可以实现样式的隔离、动态和复用。react-hey-fela 是基于 Fela 实现的。
Styled Components
Styled Components 是另一种 CSS-in-JS 库，它使用 ES6 模板字符串来定义样式。它与 react-hey-fela 相似，但有一些不同之处。react-hey-fela 更加注重组件的复用，而 Styled Components 更加注重样式的复用。
Theme
在 react-hey-fela 中，Theme 是一个 JavaScript 对象，其中包含应用程序的颜色、字体等样式属性。我们可以在组件中使用 Theme，以便在不同的主题之间切换。
Component Style
Component Style 是一个 Fela 的 CSS-in-JS 实现，它允许将样式直接与组件绑定。这样，样式就不会影响全局作用域，从而避免了多个组件之间的命名冲突。
API
接下来，我们将了解 react-hey-fela 的 API。
Hey
Hey 是 react-hey-fela 的核心组件，它是一个高阶函数。我们可以使用 Hey 来创建具有样式的组件。
import { Hey } from 'react-hey-fela';
const Div = Hey('div')({
backgroundColor: 'red',
margin: 10,
});在这个例子中，我们使用 Hey 创建了一个 div 组件，它有一个红色背景和 10px 的外边距。
WithHey
WithHey 是一个高阶组件，它帮助我们使用 Props 中的样式来渲染组件。在这样做时，该组件会自动合并外部的样式和当前 Props 中的样式。
import { WithHey } from 'react-hey-fela';
const MyComponent = ({ hey }) => (
<div {...hey}>{/* 这里是组件的内容 */}</div>
);
export default WithHey(MyComponent);在这个例子中，我们使用 WithHey 创建了一个名为 MyComponent 的组件。该组件接受一个 Props hey，它可以是一个样式对象。
ThemeProvider
ThemeProvider 是 react-hey-fela 中用于提供当前主题的组件。我们可以使用 ThemeProvider 在应用程序中切换主题。
import { ThemeProvider } from 'react-hey-fela';
const App = () => (
<ThemeProvider theme={{ color: 'red' }}>
{/* 这里是组件的内容 */}
</ThemeProvider>
);在这个例子中，我们使用 ThemeProvider 提供了一个名为 color 的主题样式。我们可以在组件中使用该样式。
示例代码
最后，我们提供一个使用 react-hey-fela 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- -------- ------------- - ---- -----------------
----- ------ - ---------------- ----- -- -- --
---------------- ------------
------- -------
------------- --
------ --------
------------- ---
-------- ----- ------
----
----- ----------- - -- --- -- -- -
---- ---------
------ --------------
------------- -----------
------
--
----- --- - -- -- -
-------------- -------- ------ ----- ---
-------- ----------------------- ---------
--- -------- ---
----------
----------------
--在这个例子中，我们定义了一个 Button 组件，它使用当前主题的颜色来显示。然后，我们使用 WithHey 创建了一个 MyComponent 组件，它包含了一个 Button。最后，我们使用 ThemeProvider 提供了一个名为 color 的主题样式，使 Button 背景色变成了红色。
总结
在这篇文章中，我们介绍了 react-hey-fela 和 CSS-in-JS 技术。我们学习了 Fela、Styled Components、Theme 和 Component Style 等概念。我们也了解了 Hey、WithHey 和 ThemeProvider 等 react-hey-fela 的 API。最后，我们提供了一个示例代码，展示了如何使用 react-hey-fela 创建具有样式的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551e481e8991b448cf537