在前端开发中，经常需要使用一些公共的样式或样式变量。而 @atlaskit/util-shared-styles 是一个提供常用样式以及颜色变量的 npm 包，它能够快速、方便地帮助我们控制和管理我们的样式。本文将介绍如何在前端项目中使用 @atlaskit/util-shared-styles，以及它的一些使用技巧。
安装
首先，我们需要安装该 npm 包。可以使用 npm 命令进行安装：
npm install --save @atlaskit/util-shared-styles
当安装完成后，就可以在项目中引用它了。
使用
我们可以直接在 JavaScript 或 CSS 中使用 @atlaskit/util-shared-styles 提供的变量和样式。例如，我们可以通过在 CSS 中使用 $color-N500 变量，来使用绿色主题的 N500（也就是 #00B8D9）：
.button {
background-color: $color-N500;
}同时，@atlaskit/util-shared-styles 也提供常用样式，用于帮助我们快速设置一些常用的样式。例如，我们可以使用 typography 的变量和样式，来设置文本的样式：
-- -------------------- ---- ------- ------- - -- ----- -- ----------------- ------ -------- ----- -------------- --------------- ------- -------------- ---------- ----------------- ------------ ------- ------------ ------------------- ------------ ------------- ----------- ----------- -------------- -- ------ -------------------- -
这样，我们就获得了一个符合我们设计标准的输入框样式。
示例代码
我们可以通过以下代码来看到 @atlaskit/util-shared-styles 是如何工作的。在此示例中，我们使用了 typography 中的 $font-family 样式：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------------- ----------
-----
----------------
------------------------------------------------------------------
--
-------
------
---- ----------------
--------- -----------
---
-----------------------------------------------------
---
----
------
-------
-------总结
通过本文，我们了解了如何使用 @atlaskit/util-shared-styles 这个 npm 包来管理我们的样式和变量。在前端开发中，使用这个包可以使我们更方便地管理和控制样式，同时也可以提高我们的开发效率。建议开发中尽可能使用此npm包来提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/atlaskit-util-shared-styles