Material Design 是一个由 Google 推出的设计语言，其风格简洁清新，且被广泛应用于 Web 应用程序的设计中。Material Design 演示了一种直观、自然、有层次的体验，同时通过使用真实的运动和阴影等效果，来使应用程序具有更加灵活、智能的感觉。而 materially-css（以下简称 MC）是一个基于 Material Design 风格全面扩展的纯 CSS 库，可以对页面的样式进行快速美化，极大提升用户的体验感。
本文将详细介绍 MC 的使用方法，并提供以实例代码来讲解每一部分，帮助初学者了解编写 web 应用程序的更多细节。
安装 MC
在开始使用 MC 之前，我们需要先安装它，使用以下命令即可：
npm install materiall-css
这条命令将在项目中安装最新版本的 MC，并将其添加为项目的一个模块。
使用 MC
在安装 MC 后，我们需要引入它，并将其添加至 html 页面中。下面的代码将向 HTML 页面引入 MC：
<head> <link rel="stylesheet" href="node_modules/materiall-css/dist/css/materially.css"> </head>
在引用 MC 时，我们需要使用相对路径，并在 HTML 页面的 <head> 标记内使用 <link> 标记来添加样式表。添加完成后，MC 就已经可以用在整个项目中来修改样式表。
使用 MC 修改样式
随着引用 MC 的添加，我们现在可以开始修改并美化样式表了。MC 包含 3 个主要的部分：Colors、Typography 和 Components。
Colors
在 MC 的颜色部分，用户可以快速重写应用的颜色，并使用 Material Design 的颜色概念对页面进行着色。下面的代码展示了如何在 CSS 样式表中使用 MC 的颜色：
.example-class {
background-color: var(--mc-blue-500);
color: white;
}在这个示例中，我们用 MC 定义的颜色来设置某个 class 的背景颜色和字体颜色。这样我们就可以通过使用预定义的 CSS 变量来重写特定的颜色样式。
Typography
在 Typography 部分，样式表为标题、文本以及段落等文本内容应用 Material Design 风格，提高应用程序的整体美观度。下面的代码展示了如何设置 <h1> 标记的样式：
-- -------------------- ---- ------- -- - ---------- ----------------------------------------- ------------ ------------------------------------------- --------------- ---------------------------------------------- ------------ ------------------------------------------- ---- ----------- -- --- --------- ------------------------------------------ --- ---------- ---------- --------------------- --- ----------------- -- ------ ------- ------- ---------------- -------------------------- ---------------
在这个示例中，我们使用 MC 定义的按钮组件来创建一个 Primary Button 按钮。这样，我们就可以快速创建设计精美的按钮，而无需重新调整样式。
结论
通过本文，我们已经了解到如何使用 MC 库来加快 Web应用程序的开发速度和提高代码的可读性，同时也提升了用户体验和应用程序的美观度。MC 库的深入使用和研究需要一定时间和经验，我们建议读者们多尝试不同的方法和选项，以便在应用程序开发中达到最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562fd81e8991b448e0cc4