在前端开发中，CSS 的样式定义是非常重要的一部分。但是有时候，我们需要针对某个 HTML 元素设置很多重复的样式，这会使得 CSS 文件变得非常臃肿。为了解决这个问题，我们可以使用 CSS-in-JS 的方式来定义样式。
在 CSS-in-JS 中，我们可以使用 styled-components、emotion 等库来定义样式。不过，这种方式也存在一些问题：每当我们需要从一个元素复制样式到另一个元素时，我们需要写一个完整的样式定义，这会使得代码的可复用性大打折扣。
最近，一个名为 styled-attributes 的 npm 包发布了。这个包为我们解决了这个问题。接下来，我们将详细介绍如何使用这个包。
安装
要使用 styled-attributes，我们需要先将其安装到我们的项目中。可以通过 npm 或者 yarn 安装：
npm install styled-attributes
yarn add styled-attributes
使用方法
styled-attributes 的使用方法非常简单，我们只需要在组件中使用它即可。下面是一个例子：
-- -------------------- ---- -------
------ ------ ---- --------------------
------ - --- ----- - ---- --------------------
----- ------ - --------------
-----
--------
--
----- --- - -- -- -
------ -
--
------- --------- ------------------- -----------
---
--
-在上面的例子中，我们引入了 bg 和 color 这两个属性。这两个属性实际上是 styled-attributes 中预定义的，我们可以直接在组件中使用。
在定义 Button 时，我们将 bg 和 color 作为样式属性添加到了 Button 的样式定义中。这样，我们就可以在实际使用 Button 时，通过设置它们的值来设置 Button 的样式。
深入了解 styled-attributes
除了预定义的 bg 和 color 属性以外，styled-attributes 还支持自定义属性。我们可以使用 withStyledAttributes 这个高阶组件来创建自定义属性。
下面是一个自定义属性的例子：
-- -------------------- ---- -------
------ ------ ---- --------------------
------ - -------------------- - ---- --------------------
----- --- - -----------
------ ---- ----- -- -- ---------
------- ---- ------ -- -- ----------
--
----- ------------- - ----------------------
------- -- - - -- - - - -- -- ------- --------
--------
----- --- - -- -- -
------ -
--
-------------- ----------- ------------ --------- -- --- -- -- -- --
---
--
-在上面的例子中，我们定义了一个组件 Box。这个组件使用 width 和 height 两个属性来控制它的大小。
然后，我们使用 withStyledAttributes 高阶组件来扩展 Box，创建了一个新的组件 BoxWithMargin。在 BoxWithMargin 中，我们新增了一个 margin 属性，用来控制 Box 的外边距。我们可以通过 margin 属性的值来设置 Box 的上下左右边距。
总结
styled-attributes 是一个非常有用的工具，它可以帮助我们解决 CSS-in-JS 中样式设计复杂而冗长的问题。通过使用 styled-attributes，我们可以轻松定义各种样式属性，并在实际使用中灵活地设置这些属性的值。如果你正在寻找一个更便捷的方式来定义样式，请尝试使用 styled-attributes。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66e56