开始 · Getting Started
快速开始

1、安装 Semi

Semi 支持搭配 React v16、v17、v18 版本使用

2、使用组件

在 Webpack、Rspack、create-react-app 或 Vite 项目中使用时,无需进行任何编译项配置,直接使用即可。构建时所有相关资源均会按需打包
(字节跳动用户,若使用的是公司内部相关工程化方案,配置请查阅飞书文档:Semi工程化 FAQ
推荐在项目中引入 reset.css,它可以重置浏览器自带的默认样式,避免不同UA之间的样式差异。

3、在 NextJs 中使用

  • 如果仅使用默认主题, 在 transpilePackages 追加 Semi 相关的 package即可 (Next.js 版本要求 >= v13.1 )
  • 如果需要使用定制主题包或 Next.js版本低于 v13.1,则需要配合 Semi 提供的编译插件 @douyinfe/semi-next 插件使用
    • 首先安装插件 npm i @douyinfe/semi-next (如果你使用 yarn 或 pnpm,请自行更换为对等命令)
    • 在 next.config.js 中进行配置,插件会将组件默认的import CSS 语句移除。更多配置可查阅 @douyinfe/semi-next详细文档
    • global.css 中引入全量的 semi css(目前在 Next.js 中不支持按需引入)
如何在 Next.js 中使用主题包
你需要更换 globals.css 中 import 语句的路径,将默认主题 CSS 产物更换为你定制的主题包中的 CSS 产物,例如当希望应用抖音创作服务平台的主题包 @semi-bot/semi-theme-doucreator

4、在 Remix 中使用

  • @remix相关包版本要求 > 1.11.0,并安装 @remix-run/css-bundle
  • 配置 remix.config.js,参考 Remix Css Side-Effect Imports。打开 unstable_cssSideEffectImports 开关,并将 Semi 相关包配置在 serverDependenciesToBundle 中。
  • root.tsx 中进行配置,参考Remix CSS Bundling。引入 cssBundleHref,并配置 links
  • 完成配置,可以正常使用 Semi 相关组件
如何在 Remix 中使用主题包
可以直接将 cssBundleHref 这一步替换为引入主题包中已构建好的全量css 产物,代替默认主题css),例如当希望应用抖音创作服务平台的主题包 @semi-bot/semi-theme-doucreator

5、UMD 方式使用组件

BUILD-JS BUILD-CSS
我们并不推荐直接使用已构建文件,这样会全量引入所有组件,无法实现按需加载。但如果确实有非构建场景的需求,可以通过以下方式引用
在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 SemiUISemiIconsSemiIllustrations
1、 请确保你已提前引入 react 以及 react-dom
2、 引入 JS 文件,以下示例 URL 中 2.27.0 为 version 标识,希望使用不同版本 Semi 时,将 version 中对应的值替换即可
3、 引入 Semi 默认主题的 CSS 样式文件