什么是 fela-preset-lusk
fela-preset-lusk 是一个 fela 的 preset，它为 CSS in JS 提供了一系列的默认值和配置项。此 preset 遵循了 Lusk 的 设计规范 和设计语言，可以使得应用程序风格统一，减少冗余代码和样式未定义。
如何使用 fela-preset-lusk
安装
npm install --save fela-preset-lusk
示例
使用 fela-preset-lusk，只需要在 felaProvider 中传入 preset 对象即可。
-- -------------------- ---- -------
------ - -------------- - ---- -------
------ - -------- -- ------------ - ---- -------------
------ -------------- ---- -------------------
----- -------- - ----------------
-------- ---------------------------- -- ------
---
-------- ----- -
------ -
------------- ------------------- ------------------------
---
---------------
--
-注意代码中，FelaProvider 传入 preset={felaPresetLusk}，意味着你使用了 fela-preset-lusk 这个 preset。
如果希望使用 fela-preset-lusk 中的 mixins、主题等，可以使用 withStyle 函数。
-- -------------------- ---- -------
------ - ---------- - ---- -------------
------ - ----- - ---- ------------------------------
------ - -------- - ---- -----------------------------
----- ----- - -- --------- ------ -- -- -
----- -------------------------
----------
-------
--
----- ------ - --------- -- --
------ -
---------
--------------------------
-
---
------ ------- --------------------------代码中，我们使用了 label 和 fontSize 这两个 preset，请确保 felaProvider 中的 preset={felaPresetLusk} 被传递到了对应的组件中。
拓展 fela-preset-lusk
如果希望拓展 fela-preset-lusk，你可以直接修改其中的插件或者添加自定义插件。
-- -------------------- ---- -------
------ - -------------- - ---- -------
------ - -------- -- ------------ - ---- -------------
------ -------------- ---- -------------------
------ - ----------- - ---- -----------------------------
----- ------------ - ------- ----- -- -
-- ----- --- ------ -- ------------ -
----- ----- - ------------
------ ------------
------ -
---------
----------- ------
--
-
------ ------
--
----- ------------- - -------------
-------- -
------------ ------
------------ -------
-
---
----- -------- - ----------------
-------- --------------------------- -------------- -- -------
---
-------- ----- -
------ -
------------- ------------------- ------------------------
---
---------------
--
-代码中通过把自定义插件添加到 felaPresetLusk.plugins 中来扩展。
同时也可以使用 extendTheme 来扩展样式主题值。
总结
fela-preset-lusk 是一个对前端开发者非常有用的工具。它通过提供默认的 CSS in JS 值和配置参数来减少冗余代码和样式不一致问题。此外，它还具有扩展功能，可以满足更多的需求。
注意，在实际的项目中，fela-preset-lusk 可能不适用于所有场景。在一些特定的情况下，为了更好的控制样式、提高可维护性，需要自行编写样式。
因此在使用之前，需要对场景进行充分分析，权衡利弊。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057add81e8991b448eb659