简介
styled-stronger 是一款基于 styled-components 的增强工具包，它在 styled-components 的基础上，提供了更加简单，直观，强大的 API 等。 在 React 应用中使用 styled-components 能够带来很多的好处，比如：模块化，强类型，易于重用等。
安装
--- ------- ---------------
使用
在 React 应用项目中正常引入 styled-components , 在需要的组件中引入 styled-stronger/css，即可开始使用它提供的API。
------ ------ ---- --------------------
------ - --- - ---- ------------------
----- ------------- - --------------
-------
------ --------
------- -------
------------- ------
---------------- ----------
------ -------
--------- -------
---------- -- --- --- ------- -- -- ------
---
--
-------- ----- -
------ --------------------------------------
-
------ ------- ----在上面的代码中，我们引入了 styled-stronger/css 并在 ButtonWrapper 组件的样式中使用了它提供的API，这些API在我们平常的开发中会非常实用。例如，css 函数中支持任意类型的样式，包括数字和字符串，快速编写合适的样式属性。此外， css 函数也支持嵌套，也支持计算属性。
API
背景颜色
backgroundColor
backgroundColor: string可以设置组件的背景颜色，值可以是一个字符串，例如
#000，red等。----- --- - ----------- ------- ------ -------- ------- -------- ---------------- ------ --- --gradient
gradient: string可以设置组件的背景渐变色，值可以是一个字符串，例如
linear-gradient(90deg, red, yellow)。----- --- - ----------- ------- ------ -------- ------- -------- --------- ----------------------- ---- --------- --- --
边框样式
border
border: string可以设置组件的边框样式，值可以是一个字符串，例如
1px solid #000。----- --- - ----------- ------- ------ -------- ------- -------- ------- ---- ----- ------ --- --borderRadius
borderRadius: string可以设置圆角边框，值可以是一个字符串，例如
4px。----- --- - ----------- ------- ------ -------- ------- -------- ------------- ------ --- --
盒子模型
padding
padding: string可以设置组件的内边距，值可以是一个字符串，例如
10px。----- --- - ----------- ------- ------ -------- ------- -------- -------- ------- --- --margin
margin: string可以设置组件的外边距，值可以是一个字符串，例如
10px。----- --- - ----------- ------- ------ -------- ------- -------- ------- ------- --- --boxShadow
boxShadow: string可以设置盒子的阴影，值可以是一个字符串，例如
0 2px 6px rgba(0, 0, 0, 0.2)。----- --- - ----------- ------- ------ -------- ------- -------- ---------- -- --- --- ------- -- -- ------ --- --
字体样式
fontSize
fontSize: string可以设置组件中字体的大小，值可以是一个字符串，例如
18px。----- --- - ----------- ------- ------ -------- ------- -------- --------- ------- --- --fontWeight
fontWeight: string可以设置组件中字体的粗细，值可以是一个字符串，例如
bold。----- --- - ----------- ------- ------ -------- ------- -------- ----------- ------- --- --fontStyle
fontStyle: string可以设置组件中字体的样式，值可以是一个字符串，例如
italic。----- --- - ----------- ------- ------ -------- ------- -------- ---------- --------- --- --color
color: string可以设置组件中字体的颜色，值可以是一个字符串，例如
#000。----- --- - ----------- ------- ------ -------- ------- -------- ------ ------- --- --
总结
styled-stronger 是一款非常实用的增强工具包，它为我们在使用 styled-components 时提供了额外的便捷性，能够极大的提高我们的开发效率。在编写样式时，我们只需要使用它提供的API，就可以更快更好地完成我们的工作，并且还能保证代码的可维护性和重用性。希望你在学习使用 styled-stronger 时能够有所收获，同时也能在以后的工作中减轻自己的负担。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055bf581e8991b448d997e