随着前端开发的快速迭代，UI 组件库的需求越来越强烈。而 Material Design 是目前应用最广泛的设计规范之一，提供了一套优雅且实用的 UI 组件库。这里介绍一下如何使用 npm 包 @material-git/core 来快速开始 Material Design 风格的前端开发。
什么是 @material-git/core
@material-git/core 其实是一个基于 Material Design 的 UI 组件库。与其他的 Material Design 组件库不同的是，@material-git/core 是一个 git submodule 的形式，可以确保每个组件都独立维护在一个不同的仓库中，不同的组件之间互相独立。另外，@material-git/core 还有一个非常方便的特性：它使用的是 scss，可以非常容易地定制主题。
快速开始
首先，我们需要引入 @material-git/core：
npm install @material-git/core
然后，在我们的项目中，新建一个 scss 文件，引入 @material-git/core：
// app.scss @import '@material-git/core';
现在，我们可以随意使用 Material Design 风格的组件了，例如，一个按钮：
<button class="mdc-button"> Normal button </button> <button class="mdc-button mdc-button--raised"> Raised button </button>
这就是美妙的 Material Design 风格的按钮了。
定制主题
@material-git/core 的推销点之一是可以非常容易地定制主题。如果你想要更改全局的颜色，可以使用 scss 变量。例如，要将主题的主颜色从蓝色更改为红色，则必须定义以下变量：
// app.scss $mdc-theme-primary: red; @import '@material-git/core';
我们还可以使用其他变量来更改其他主题颜色和元素大小。@material-git/core 有许多可用的变量，可以在 SCSS 文件中进行查找。
总结
@material-git/core 是一个非常优秀的基于 Material Design 的 UI 组件库。它具有良好的可定制性和模块化，非常适合前端开发人员创建漂亮且强大的界面。如果你想要开始 Material Design 风格的前端开发，@material-git/core 会是一个不错的选择。
希望这篇文章对你有帮助。如果您有其他疑问，请随时留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446b5