前言
在前端开发中，为了实现设计师的设计稿，常常需要不断重复编写 CSS 样式，这样不仅浪费时间精力，还可能出现样式不一致的问题。此时，我们可以使用 CSS 预处理器、CSS 框架等工具来简化样式开发，但这些工具本身并不能完全解决样式重复的问题。
而 @styled-system/typography 就是解决样式重复的问题一个很好的解决方案。这个包提供了一套适用于 web 应用程序的排版样式，且可以自定义主题。通过使用该包，可以提高开发效率，同时也能够使项目更具有可扩展性。
功能
@styled-system/typography 可以让你在应用程序中创建排版样式，而无需编写大量的 CSS 代码。该包提供了许多排版变量，您可以根据自己的需求来组合它们，以完成特定的排版样式。下面是@styled-system/typography 支持的一些排版属性：
- fontSize
- fontWeight
- lineHeight
- letterSpacing
- fontStyle
- textAlign
- textDecoration
- textTransform
- fontVariant
除此之外，该包还支持如下属性：
- fontFamily：字体
- color：颜色
- bg：背景颜色
- opacity：透明度
- space：间距
- width、height、minHeight、maxHeight：高度
- minWidth、maxWidth：宽度
- display：显示方式
- verticalAlign：垂直对齐方式
- alignItems：子元素垂直对齐方式
- justifyContent：子元素水平对齐方式
- flexWrap：是否换行
- flexBasis：子元素基准大小
- flexDirection：排列方式
通过这些属性，@styled-system/typography 可以完成大部分常见的排版样式需求。
安装
你可以通过 npm 来安装 @styled-system/typography：
npm install @styled-system/typography
或者，你可以在项目中添加下方的 script 标签引入文件：
<script src="https://unpkg.com/@styled-system/typography@0.7.0/dist/index.umd.min.js"></script>
使用
基本使用
在你的项目中，你可以通过如下方式使用 @styled-system/typography：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ------------- - ---- ----------------------------
----- ----- - --------------
------ ------- -------- ----- -
------ -
-------------- --------------
--------- ----------
----------------
--
-通过将 <ThemeProvider> 组件包裹在自己的组件之外，即可使用 @styled-system/typography 提供的默认样式。
自定义主题
你也可以根据你的项目需求自定义样式主题。首先，你需要创建一个主题对象：
-- -------------------- ---- -------
----- ----- - -------------
------ -
----- ----------- ------------
-------- --------- -------
---------- ------- -----------
--
---------- ---- --- --- --- --- --- --- --- ----
------------ -
----- ----
-------- ----
----- ----
--
------------ -
----- ----
-------- -----
--
------- -
----- -------
----------- -------
-------- ----------
---------- -------
------ ----------
--
---然后，在使用 <ThemeProvider> 组件时，将主题对象传入该组件：
export default function App() {
return (
<ThemeProvider theme={theme}>
<h1>Hello World</h1>
</ThemeProvider>
);
}排版样式继承
如果你想要让一个 HTML 元素继承另一个元素的排版样式，可以使用 sx 属性：
-- -------------------- ---- -------
------ - -- - ---- ----------------------------
------ ------- -------- ----- -
------ -
---- --------------- --------- -- ----------- ------ ----
--------- ----------
------
--
-这里 sx 函数接受一个对象，对象的 key 是样式属性，value 是对应的值。sx 函数会返回一个 CSS 类名，将该类名应用到元素的 className 中即可。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ------------- - ---- ----------------------------
------ - -- - ---- ----------------------------
----- ----- - -------------
------ -
----- ----------- ------------
-------- --------- -------
---------- ------- -----------
--
---------- ---- --- --- --- --- --- --- --- ----
------------ -
----- ----
-------- ----
----- ----
--
------------ -
----- ----
-------- -----
--
------- -
----- -------
----------- -------
-------- ----------
---------- -------
------ ----------
--
---
------ ------- -------- ----- -
------ -
-------------- --------------
------- --------------- --- ---------- ------- ------ ----
--- --------------- --------- -- ----------- ------ -------------
---- --------------- --------- -- --------------- --------------- -------- ------ ----
-- -------- --------------- --------------- ------- ------ ------ ----
--
----
-- -------- --------------- --------------- ------- ------ ------ ----
--
----
-- -------- --------------- --------------- ------- ------ ------ ----
----
----
------
---------
----- --------------- --- ------- --------- -------- -- - ----
--- --------------- --------- -- ---------- --------- --- - --------------
-- --------------- --------- -- ----------- ------- --- - ----
----- ----- ------ --- ---- ----------- ----------- ----- ----- ----- -------------- --
----- ----------- ------ ------- ----- ----- -------- ------ --------- ----- ------
------------- ------- -------- ----------- ------ --- ---- ------ ---- ------
----
-- --------------- --------- -- ----------- ------- --- - ----
----- ----- ------ --- ---- ----------- ----------- ----- ----- ----- -------------- --
----- ----------- ------ ------- ----- ----- -------- ------ --------- ----- ------
------------- ------- -------- ----------- ------ --- ---- ------ ---- ------
----
-- --------------- --------- -- ----------- ------- --- - ----
----- ----- ------ --- ---- ----------- ----------- ----- ----- ----- -------------- --
----- ----------- ------ ------- ----- ----- -------- ------ --------- ----- ------
------------- ------- -------- ----------- ------ --- ---- ------ ---- ------
----
-- --------------- --------- -- ----------- ------- --- - ----
----- ----- ------ --- ---- ----------- ----------- ----- ----- ----- -------------- --
----- ----------- ------ ------- ----- ----- -------- ------ --------- ----- ------
------------- ------- -------- ----------- ------ --- ---- ------ ---- ------
----
-------
------- --------------- --- -------- ------- ------- ---------- -------- ----
-- --------------- ----------- ------- --------- -- ------ ------ ----
------ ---- -------- ----
----
---------
----------------
--
-此时，你就可以在你的项目中使用 @styled-system/typography 来简化样式编写，提高开发效率了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc69bb5cbfe1ea061225d