添加新的 Utility Class
上一小节,我们学习了如何使用通用的 Utility Class 工具库.
我们不但可以自己写组件,也可以自己实现新的 Utility Class,方便在代码间复用。
Utility Class 本身也是一种面向组件的技术(将不同 class 用在一个组件上,等价于给这个组件设置了一些来自基类的属性),但 Utility Class 的 classname 是全局的(因为要用在任意组件/元素上),很适合用独立 CSS 文件来实现。
创建一个新的 CSS 文件:
- macOS
- Windows
mkdir -p src/styles
touch src/styles/utils.css
mkdir -p src/styles
ni 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
,可以看到字体颜色改变了:
注
此处只是为了演示 Utility Class 用法。真实项目中,在有 Tailwind CSS 的情况下,这种 Utility Class 没什么价值,应该通过配置 Design System 的 theme 来增加字体颜色。
utils.css
也可以写成 utils.scss
或 utils.less
,Modern.js 对 SCSS 和 Less 同样提供开箱即用的支持。
不过在 PostCSS 的支持下,现代 CSS 应该足以满足这些开发需求,性能相较于预处理器也更好,建议优先用 .css 文件。
本小节的代码可以在这里查看。