跳转到主文档

​​添加新的 Utility Class

上一小节，我们学习了如何使用通用的 Utility Class 工具库.

我们不但可以自己写组件，也可以自己实现新的 Utility Class，方便在代码间复用。

Utility Class 本身也是一种面向组件的技术（将不同 class 用在一个组件上，等价于给这个组件设置了一些来自基类的属性），但 Utility Class 的 classname 是全局的（因为要用在任意组件/元素上），很适合用独立 CSS 文件来实现。

创建一个新的 CSS 文件：

mkdir -p src/styles
touch src/styles/utils.css

在 src/App.tsx 里导入 utils.css：

import './styles/utils.css';

在 src/styles/utils.css 里实现一个叫作 custom-text-gray 的 Utility Class。

:root {
  --custom-text-color:rgb(113, 128, 150);
}

.custom-text-gray {
  color: var(--custom-text-color);
}
注

Modern.js 集成了 PostCSS，支持现代 CSS 语法特性，比如 custom properties。

在 src/components/Item/index.tsx 里使用，把：

<div className="ml-4 flex-1 flex justify-between">

改成：

<div className="ml-4 custom-text-gray flex-1 flex justify-between">

执行 pnpm run dev，可以看到字体颜色改变了：

design2

注

此处只是为了演示 Utility Class 用法。真实项目中，在有 Tailwind CSS 的情况下，这种 Utility Class 没什么价值，应该通过配置 Design System 的 theme 来增加字体颜色。

utils.css 也可以写成 utils.scss 或 utils.less，Modern.js 对 SCSS 和 Less 同样提供开箱即用的支持。

不过在 PostCSS 的支持下，现代 CSS 应该足以满足这些开发需求，性能相较于预处理器也更好，建议优先用 .css 文件。

本小节的代码可以在这里查看。