Frontend Academy · 课时

使用设计系统

Q: 「使用设计系统」这节课中我会学到什么？

在宿主应用中安装库，应用主题提供程序，删除未使用组件，并及时跟进版本升级。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在宿主应用中安装库，应用主题提供程序，删除未使用组件，并及时跟进版本升级。

使用设计系统 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

安装与设置

将设计系统添加为依赖项。有些库还需要额外设置：provider、CSS 导入和字体加载。

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

主题 Provider

大多数设计系统都会提供顶层 provider，用于处理主题（浅色/深色）、区域设置和共享上下文。只需在应用外层包装一次。

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

导入组件

只导入需要的内容——结合摇树优化后，最终只会发布实际使用的组件。

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

子路径导入

有些库支持子路径导入，以提高代码清晰度并减小代码包体积。

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

摇树优化提示

摇树优化会在打包过程中删除未使用的导出。它需要满足以下条件：ESM 构建、库的 package.json 中包含 sideEffects: false，以及在代码中使用具名导入。使用代码包分析器进行验证。

使用主题进行定制

覆盖主题令牌以匹配您的品牌，无需分叉该库。

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

扩展组件

需要略有不同的按钮？请进行组合，而不是分叉。

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

升级前阅读 CHANGELOG

升级 MAJOR 版本前，请务必阅读 CHANGELOG。请留意不兼容变更、迁移代码转换工具以及推荐使用的新 API。

重大版本升级的代码转换工具

优秀的库会提供代码转换工具（jscodeshift 脚本），自动完成不兼容变更的迁移。

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

固定版本与插入符范围

"^1.4.2"允许升级到 1.x.y 版本——如果该库不遵循 SemVer，这就存在风险。"1.4.2"会精确固定版本——最安全，但您必须手动更新。Renovate/Dependabot 可以帮助您自动完成每周升级。

向上游报告问题

发现错误？请提交包含最小复现示例的问题。需要某项功能？请先发起讨论。回馈社区有助于为所有人改进设计系统。

避免覆盖样式

不要使用 !important 或后代选择器深入访问设计系统的内部实现。请使用公开的主题 API。临时性的覆盖方案会在下一次升级时失效。

快速检查

如果设计系统使用 ESM 和具名导出，怎样才能只使用所需的组件，同时保持最简洁？

回顾：使用设计系统

安装后使用主题包裹在 DesignSystemProvider 中。使用具名 ESM 导入以实现摇树优化。覆盖主题令牌以匹配品牌。进行组合，而不是分叉。MAJOR 升级前阅读 CHANGELOG；如果提供了代码转换工具，请运行它们。谨慎选择固定版本或插入符范围。向上游报告错误或提交拉取请求。不要通过 !important 绕过公开 API。

常见问题解答

「使用设计系统」课时是免费的吗？

是的 — 「使用设计系统」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「使用设计系统」这节课中我会学到什么？

在宿主应用中安装库，应用主题提供程序，删除未使用组件，并及时跟进版本升级。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用设计系统」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy