前言
在前端开发中，UI框架扮演着重要的角色。在 UI 框架中，CSS往往是最核心的一部分。为了方便而不失灵活性地使用 CSS，很多开发者选择使用 CSS 类库，而 mt-ui-css 就是其中之一。它是一个基于 Less 的 CSS 类库，使用起来十分方便，并且提供了许多优秀的 UI 组件供我们选择。
本文将为大家介绍如何使用 npm 包 mt-ui-css，以及如何在项目中利用它的组件。
安装
首先我们需要在项目中安装 mt-ui-css 包，使用 npm 命令即可：
npm install mt-ui-css
安装完成后，我们需要在 HTML 中引入 CSS 文件：
<link rel="stylesheet" href="node_modules/mt-ui-css/dist/mt-ui.min.css">
使用
常规样式
mt-ui-css 的样式已经定义好了大量的 class，我们可以直接在 HTML 中使用这些 class 来引用样式。
前缀
mt-ui-css 中的 CSS class 都有一个前缀，例如 mt-btn。这些前缀是为了避免与其他类库或者项目中的相同命名 class 冲突。
基本用法
我们可以在 HTML 中使用 mt-ui-css 中已经定义好的 class，来实现一些基本的样式效果。
以按钮为例，我们可以使用以下代码：
<button class="mt-btn">点击</button>
这样按钮就会应用 mt-ui-css 中定义的按钮样式了。
基于 size 的 class
mt-ui-css 中的许多组件都提供了三种大小选项：small、medium 和 large。我们可以选择其中一个来使组件的大小符合需求。
以按钮为例，我们可以使用以下 class：
mt-btn-small: 小按钮mt-btn-medium: 中等按钮mt-btn-large: 大按钮
组件
mt-ui-css 除了提供常规的样式外，还提供了一些优秀的 UI 组件，包括按钮、输入框、选择器等。使用这些组件前，需要确定是否需要引入该组件相关的 JS 文件以及样式文件。大部分组件都不需要 JS 文件。
输入框
我们可以使用以下代码来使用 mt-ui-css 的输入框组件：
<div class="mt-input"> <label>输入框</label> <input type="text"> </div>
通过添加 mt-input class，我们就能应用 mt-ui-css 中的输入框组件。
选择器
mt-ui-css 中还提供了多种选择器组件，包括单选框和复选框。
单选框示例代码：
-- -------------------- ---- -------
---- ----------------------
---- -----------------
-------
------ ------------ ------------------ ----------
----------------
--------
------
---- -----------------
-------
------ ------------ ------------------ ----------
----------------
--------
------
---- -----------------
-------
------ ------------ ------------------ ----------
----------------
--------
------
------复选框示例代码：
-- -------------------- ---- -------
---- --------------------------
---- --------------------
-------
------ --------------- --------------------- ----------
----------------
--------
------
---- --------------------
-------
------ --------------- --------------------- ----------
----------------
--------
------
---- --------------------
-------
------ --------------- --------------------- ----------
----------------
--------
------
------自定义样式
如果现有的样式无法满足需求，我们可以自定义一些样式。首先，我们需要在 HTML 中为组件添加独特的 class，然后在 CSS 文件中定义对应的样式。
以按钮为例，我们可以定义如下的样式：
.custom-btn {
background-color: #00a0e9;
color: white;
}然后在 HTML 中使用 mt-btn 和 custom-btn 两个 class：
<button class="mt-btn custom-btn">点击</button>
这样，按钮就会应用自定义的样式。
结语
mt-ui-css 是一个非常强大的 CSS 类库，提供了大量优秀的 UI 组件。通过本文，您已经了解了 mt-ui-css 的基本使用方法，并理解了如何在项目中应用它的组件。如果您希望了解更多关于 mt-ui-css 的知识，请查看官方文档。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d581e8991b448d4e15