介绍
Butter Base Theme 是一个 React 主题框架，它提供了一整套基于 Material Design 的 UI 组件，可以方便地用于 Web 应用程序的开发。本文将介绍如何使用 npm 包 butter-base-theme 快速构建 React 应用。
安装
首先，通过 npm 安装 butter-base-theme：
npm install butter-base-theme
引入
在 React 应用程序的入口文件中，按照以下方式引入 butter-base-theme：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- ---------------------------
------ --------------- ---- --------------------
-------- ----- -
------ -
-------------- ------------------------
--- --------- ---
----------------
--
-使用
现在，应用程序中的所有组件都将使用 butter-base-theme 提供的默认样式。如果需要定制主题，请按照以下方式使用 ThemeProvider：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- ---------------------------
------ --------------- ---- --------------------
-------- ----- -
------ -
-------------- --------------------------- -------- ---------------------------- -------- ------ --------------
--- --------- ---
----------------
--
-此例子中，我们将主题的 primary 颜色设置为紫色。
示例代码
以下是一个使用 butter-base-theme 构建的基本登录表单组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- ---------------------------
------ ----------- ------- ---- --------------------
----- --------- - ---------------- -- --
----- -
-------- -------
-------------- ---------
--------------- ---------
----------- ---------
------- -------
--
---------- -
------- -----------------
------ ------
-
----
-------- ----------- -
----- ------- - ------------
------ -
----- -------------------------
---------- ----------------------------- -------------
---------- ----------------------------- ---------- -----------------
------- --------------- -------------------------------
-------
--
-
------ ------- ----------总结
本文介绍了如何使用 npm 包 butter-base-theme 构建 React 应用程序，并提供了一个简单的示例应用程序。通过使用 butter-base-theme，可以快速构建出具有 Material Design 风格的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590881e8991b448d666e