React是当前最流行的JavaScript库之一，它广泛应用于前端开发中。而Material Design是一种风格，它被广泛地运用于App和Web应用的设计中。在这篇文章中，我们将介绍如何使用npm包 react-material-components-web-thin搭建出一个完整的Material Design应用。
安装react-material-components-web-thin
使用npm包管理器，可以快速方便地完成react-material-components-web-thin的安装。
npm install react-material-components-web-thin
导入组件
安装成功后，我们需要将组件导入到我们的代码中。比如，我们可以导入一个RaisedButton组件，这是一个Material Design风格的按钮。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ - ---- -------------------------------------
----- --- ------- --------- -
-------- -
------ -
-----
------- ------------------
------
--
-
-
------ ------- ----这里我们使用import命令，将Button组件从react-material-components-web-thin中导入，并在App组件中创建一个RaisedButton组件。
创建一个完整的Material Design应用
除了Button组件之外，react-material-components-web-thin还提供了很多其他的组件，包括卡片、输入框、进度条等等。下面我们来创建一个完整的Material Design应用。
创建一个Card组件
我们可以使用Card组件来呈现一些列表信息。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ------------ ------------------ --------------- - ---- -------------------------------------
----- --- ------- --------- -
-------- -
------ -
-----
------
-----
-----------
---------
------
-------------
-------------------
--------------------
--------------------
--------------------
-----------------
--------------------
--------------------
------------------
--------------
-------
------
--
-
-
------ ------- ----创建一个TextField组件
我们可以使用TextField组件来接收用户输入。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- - ---- -------------------------------------
----- --- ------- --------- -
-------- -
------ -
-----
---------- ----------- --
------
--
-
-
------ ------- ----创建一个SnackBar组件
我们可以使用SnackBar组件来显示一些消息，比如用户的输入是否正确等。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- ------ - ---- -------------------------------------
----- --- ------- --------- -
------------------ - -- -- --------------------------------
-------- -------
---------- -----
-------- -----
----------- -----
-------------- -- -- -
--------------------------
--
---
-------- -
------ -
-----
------- ------ -----------------------------------------------------
--------- ------------- -- - ------------- - --------- -- --
------
--
-
-
------ ------- ----在这里，我们使用SnackBar组件来显示一些消息，然后使用Button组件打开这个SnackBar。
总结
本文介绍了如何使用npm包 react-material-components-web-thin快速搭建一个完整的Material Design应用。我们通过导入Button、Card、TextField、SnackBar组件，并需要使用它们创建出一个完整的Material Design应用。这不仅对于初学者来说非常有帮助，也可对那些已经有一些经验的人来说是个很好的参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601881e8991b448de3bf