前言
在前端开发中，常常需要使用现成的组件库或者 UI 库，最常见的就是 Bootstrap。不过其样式太过乏味，而且在复杂场景里，往往需要开发者自己封装组件。此时，就需要一些功能强大的组件库来帮助我们。今天，我们重点介绍一下 Google 推出的 Material Design 风格的 UI 库 Material-JS，并带你了解如何在项目中使用它。
Material-JS 的介绍
Material-JS 是 Google 官方出品的一个 Material Design 风格的 UI 库，而且已经是一个成熟的项目了。它包括了一些基础组件，比如按钮、卡片、输入框，还有一些高阶组件，比如滑动条、选择器、日期、时间选择器等。
Material-JS 安装
在使用 Material-JS 之前，你需要确保你的项目已经有了 npm。可以在终端中输入下面代码判断是否已经安装。
npm -v
如果提示不存在，可以到 Node.js 官网下载安装。
接下来，我们进入实战环节。
首先，在终端运行以下代码：
npm i material-components-web
Material-JS 使用
在安装后，我们就可以在项目中引入它的组件，并使用它们了。
1. 引入样式
在项目中，你需要引入 Material-JS 的样式文件。样式文件在安装之后的路径如下：./node_modules/material-components-web/dist/material-components-web.min.css，你需要将这个文件引入 HTML 页面中。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------- ---------- ----------- ----- ---------------- ----------------------------------------------------------------------------------- ------- ------ --------- -------- ---------- --------- ------- -------
2. 引入组件
在你首次使用一个 Material-JS 组件之前，你需要先引入它的 JavaScript 文件。
比如，我们先引入一个 button 的 JavaScript 文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ---------- -----------
----- ---------------- -----------------------------------------------------------------------------------
-------
------
------- ----------------------------------
------- ------------------------------------------------------------------------------------------
--------
----- ------ - ---------------------------------------------------------------------
---------
-------
-------3. 组合使用组件
在使用 Material-JS 的过程中，我们通常需要组合使用多个组件。比如，我们可以在输入框后面添加一个按钮，并实现搜索功能：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ---------- -----------
----- ---------------- -----------------------------------------------------------------------------------
-------
------
---- ----------------------
------ ----------- -----------------------------
------ -----------------------------------------
---- ------------------------------
------- ----------------- ------------------ ------------------ ----------------------- --------------------- -------------------------------------
------
------- ------------------------------------------------------------------------------------------
--------
----- ------------ - ------------------------------------------------------------------------------
---------
-------
-------4. 自定义组件主题样式
如果你不能满足于 Material-JS 默认提供的样式，你也可以自定义组件的样式。有两种方式可以自定义主题样式。
4.1 CSS 变量
在 Material-JS 中，我们可以通过修改 CSS 变量的方式调整组件的颜色、字体等样式。
button {
--mdc-theme-primary: #ff0000;
--mdc-theme-secondary: #00ff00;
--mdc-theme-on-primary: #fff;
--mdc-theme-on-secondary: #fff;
}4.2 编写 SCSS 文件
其实，Material-JS 自带了一种 Sass 工具，使得开发者更方便地定制样式。
首先，需要确认项目中是否安装了 Sass，如果没有，可以在终端中输入以下命令安装：
npm install -g sass
接着，创建一个 SCSS 文件，在文件中覆盖原有的变量，最后编译出 CSS 文件。
$mdc-theme-primary: #ff0000; $mdc-theme-secondary: #00ff00; $mdc-theme-on-primary: #fff; $mdc-theme-on-secondary: #fff; @import './node_modules/material-components-web/material-components-web';
编译命令。
sass index.scss:index.css
总结
Material-JS 是一个功能强大、易用的 Material Design 风格的 UI 库，使得在前端开发过程中，更容易创建漂亮的 Web 应用程序。在本篇文章中，我们介绍了它的安装方式、使用方法和自定义主题样式。希望这篇文章能够帮助你更好地掌握 Material-JS 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c281e8991b448e3203