​管理 Design System

在前两个小节中，我们了解了 Utility Class 以及使用了 Modern.js 已经集成的 Utility Class 工具库 Tailwind CSS， 默认提供的设计系统生成的样式可以满足实际开发中的部分需求。

然而实际开发中，我们可能需要修改默认的设计系统规范。为此，Modern.js 提供了 source.designSystem 配置来管理项目的设计系统。

覆盖默认配置

要覆盖默认的设计系统配置，请在 modern.config.js 的 source.designSystem 中添加要覆盖的键。

modern.config.js

export default defineConfig({
  source: {
    designSystem: {
      opacity: {
        0: '0',
        20: '0.2',
        40: '0.4',
        60: '0.6',
        80: '0.8',
        100: '1',
      },
    },
  },
});

这将完全替换默认键配置，因此在上面的示例中，不会生成默认的 opacity utilities。

所有未覆盖的键都将从默认主题继承，因此在上面的示例中，将保留颜色，间距，边框圆角，背景位置等内容的默认主题配置。

扩展默认配置

如果您想保留主题选项的默认值，但又要添加新值，请在 designSystem.extend 下添加扩展的内容。

例如，如果我们想添加一个额外的断点但保留现有的断点，则可以扩展 screens 属性：

modern.config.js

export default defineConfig({
  source: {
    designSystem: {
      opacity: {
        0: '0',
        20: '0.2',
        40: '0.4',
        60: '0.6',
        80: '0.8',
        100: '1',
      },
      extend: {
        screens: {
          '2xl': '1440px',
        },
      },
    },
  },
});

修改 src/Item/index.tsx 的 button 组件代码

<button
  type="button"
  disabled={archived}
  className={`bg-blue-500 text-white font-bold
    py-2 px-4 rounded-full hover:bg-blue-700 2xl:bg-red-500`}
>
  Archive
</button>

执行 pnpm run dev 后，增加页面宽度超过 1440px 可以看到 button 颜色变化：

---

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