什么是 typography-theme-irving？
typography-theme-irving 是一款由 Kyle Mathews 开发的 React 主题组件库，它提供了一套美观的排版样式，以优雅、简单、明晰的设计理念帮助用户展示清爽、易读的内容。
为了更好地使用 typography-theme-irving，我们需要在项目中使用 typography.js 这个库。而 typography.js 又是一款独立的 JavaScript 库，它可以只做一件事情 —— 和 React 一起处理文本。
typography-theme-irving 成了许多人喜欢使用的内容样式库，因为它既可以作为 React 的组件使用，也可以和其他技术堆栈集成使用，例如 GatsbyJS。
如何安装 typography-theme-irving？
首先，我们需要在项目中安装 typography.js。我们可以在 CMD 或终端中输入以下命令：
npm install typography react-typography --save
接下来，我们需要安装 typography-theme-irving 主题包：
npm install typography-theme-irving --save
这个时候可以通过 React 包管理器引入主题包。我们可以用下面这段代码
import Typography from "typography" import Irving from "typography-theme-irving" const typography = new Typography(Irving)
如何使用 typography-theme-irving?
让我们来写一份简单的 React 组件，使用 typography-theme-irving 主题包：
-- -------------------- ---- -------
------ ----- ---- -------
------ ---------- ---- ------------
------ ------ ---- -------------------------
----- ---------- - --- ------------------
----- --- - -- -- -
---- -------- ------- ----- ------ --------- --- ---
---------------------------
---------- --- ----- -- ---------------
---
---- -- -- ------- -- ------------- ----- --- ------ ------ ---- ---- --
----- --- ----- --
-- -----------------------------------------------------
------------- -------------
------ --
--- ----- --
-- --------------------------------------------------------------------------------------------------
------ ----- -------------
----
-
----
------
-
------ ------- ---这个例子中我们用到了 injectStyles 方法。这个方法会动态地注入 CSS 样式，这样我们就不用手动处理 CSS 代码了。
最后，我们可以启动 React 应用程序，并且看到我们的页面是用 Irving 主题打造的：
import React from "react"
import { render } from "react-dom"
import App from "./App"
render(<App />, document.getElementById("root"))总结
我们讲解了 typography-theme-irving 的基本知识和使用方法，并通过一个例子展示了如何在项目中使用它。Typography-theme-irving 可以帮助我们快速的将精力放在内容上，让代码变得更加整洁、易读、优雅。同时，通过使用 typography-theme-irving 和 typography.js，你也可以很方便地实现内容样式的自定义，比如修改字号、字体类型等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2555c03b0ab45f74a8b982