---
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);
}
```

:::info 注
上一节提到过，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`，可以看到字体颜色改变了：

![design2](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/result3.png)

:::info 注
此处只是为了演示 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)。