跳转到主文档

​​添加新的 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-preset-envautoprefixer 等主流 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.scssutils.less,Modern.js 对 SCSS 和 Less 同样提供开箱即用的支持。

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


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