rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
85 lines (56 loc) • 2.64 kB
Markdown
---
title: 添加新的 Utility Class
---
上一小节，我们学习了如何使用通用的 Utility Class 工具库.
我们不但可以自己写组件，也可以自己实现新的 Utility Class，方便在代码间复用。
Utility Class 本身也是一种**面向组件**的技术（将不同 class 用在一个组件上，等价于给这个组件设置了一些来自基类的属性），但 Utility Class 的 classname 是全局的（因为要用在任意组件/元素上），很适合用独立 CSS 文件来实现。
创建一个新的 CSS 文件：
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="macOS" label="macOS" default>
```bash
mkdir -p src/styles
touch src/styles/utils.css
```
</TabItem>
<TabItem value="Windows" label="Windows">
```powershell
mkdir -p src/styles
ni src/styles/utils.css
```
</TabItem>
</Tabs>
在 `src/App.tsx` 里导入 `utils.css`：
```js
import './styles/utils.css';
```
在 `src/styles/utils.css` 里实现一个叫作 `custom-text-gray` 的 Utility Class。
```css
:root {
--custom-text-color:rgb(113, 128, 150);
}
.custom-text-gray {
color: var(--custom-text-color);
}
```
:::note 注
上一节提到过，Modern.js 集成了 [postcss-preset-env](https://preset-env.cssdb.org/features)、[autoprefixer](https://github.com/postcss/autoprefixer) 等主流 PostCSS 项目，因此不但会自动处理平台兼容性，也支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)。
:::
在 `src/components/Item/index.tsx` 里使用，把：
```js
<div className="ml-4 flex-1 flex justify-between">
```
改成：
```js
<div className="ml-4 custom-text-gray flex-1 flex justify-between">
```
执行 `pnpm run dev`，可以看到字体颜色改变了：
:::note 注
此处只是为了演示 Utility Class 用法。真实项目中，在有 Tailwind CSS 的情况下，这种 Utility Class 没什么价值，应该通过配置 Design System 的 [**theme**](https://tailwindcss.com/docs/customizing-colors) 来增加字体颜色。
`utils.css` 也可以写成 `utils.scss` 或 `utils.less`，Modern.js 对 Scss 和 Less 同样提供开箱即用的支持。
不过在 PostCSS 的支持下，现代 CSS 应该足以满足这些开发需求，性能相较于预处理器也更好，建议优先用 .css 文件。
:::
---
> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c06/hello-modern-3)。