什么是 fela-plugin-unit
fela-plugin-unit 是一个可以方便地设置 CSS 单位的 fela 插件。fela 是一个用于管理 css 的 JavaScript 工具包，它的目标是使 CSS 的样式代码与 JavaScript 的组件代码分离。
安装
使用 npm 进行安装：
--- ------- ---------------- ------
使用
在 fela 中配置 fela-plugin-unit：
------ - -------------- - ---- ------- ------ ---- ---- ------------------- ----- -------- - ---------------- -------- -------------- ---
这里配置了一个渲染器并使用了 fela-plugin-unit 设置了单位为 rem。我们可以设置任意的单位，如 px、em 等等。
在样式中使用：
------ - ---------- - ---- -------
----- ------ - -------------------
----- -
------ ----
------- --------
--
---这里我们使用了 fela 的 StyleSheet 来创建样式，可以看到我们设置了 width 为 100，设置了 height 为 10rem。
参数
fela-plugin-unit 接受两个参数：
unit，默认值为px，可以接受任意 CSS 单位。properties，默认值为['fontSize', 'margin', 'marginBottom', 'marginTop', 'marginLeft', 'marginRight', 'padding', 'paddingBottom', 'paddingTop', 'paddingLeft', 'paddingRight', 'height', 'maxHeight', 'minHeight', 'width', 'maxWidth', 'minWidth']，可以传递一个包含 CSS 属性名称的数组。
注意事项
- 直接将字符串传递给 fela-plugin-unit 来设置单位会导致样式失效，一定要传递字符串数组。
- 在 React Native 中是不需要使用此插件来设置单位的，React Native 自带了 px 转换为 dp 的功能。
示例代码
------ - -------------- - ---- -------
------ ---- ---- -------------------
----- -------- - ----------------
-------- ------------ ------------- -------------
---
----- ------ - -------------------
---------- -
---------- --- -- --------------
------------ --------- -- ----- --------
--
---结论
通过使用 fela-plugin-unit 插件，我们可以在 fela 中方便地设置 CSS 单位，让 CSS 样式代码和 JavaScript 的组件代码分离得更加清晰。但值得注意的是，由于传递参数需要使用数组形式，而且在 React Native 中不需要使用此插件，所以在使用时一定要注意。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/73177