什么是 fela-plugin-unit
fela-plugin-unit 是一个可以方便地设置 CSS 单位的 fela 插件。fela 是一个用于管理 css 的 JavaScript 工具包，它的目标是使 CSS 的样式代码与 JavaScript 的组件代码分离。
安装
使用 npm 进行安装：
npm install fela-plugin-unit --save
使用
在 fela 中配置 fela-plugin-unit：
import { createRenderer } from 'fela'; import unit from 'fela-plugin-unit'; const renderer = createRenderer({ plugins: [unit('rem')], });
这里配置了一个渲染器并使用了 fela-plugin-unit 设置了单位为 rem。我们可以设置任意的单位，如 px、em 等等。
在样式中使用：
import { StyleSheet } from 'fela'; const styles = StyleSheet.create({ main: { width: 100, height: '10rem', }, });
这里我们使用了 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
