开始 · FAQ
常见问题
Semi 提供了 Figma UI Kit，考虑提供 Sketch 或基于其他设计工具的版本吗？
暂无计划，具体原因请参考 Issue 74
Semi 目前提供了基于 React 版本的 ui library，是否有官方提供其他技术栈 lib 的计划？
Semi 后续会提供移动端组件吗 ？
暂无计划，具体原因参考 discussions 287
Semi 的默认的主题风格跟我们系统的定位不符，可以配置另外的主题吗？
- 具体请参考 定制主题 。Semi 提供多达 2700+ Design Token 允许用户进行深度定制，无论你是研发还是设计师，在 Semi DSM 里可以非常方便地进行样式层配置，并在代码、设计稿始终保持双向同步。基于 Semi 你可以低成本定制属于你自己的 Design System 将
Semi Design定制为Any Design - 并且在使用时，你也只需要在 webpack.config.js 里指定使用的主题包名即可完成接入（需接入 Semi 插件）
什么情况下推荐使用 Design Token 定制样式，什么情况下推荐通过 css 覆盖方式定制样式？
- Design Token 主要适用于需要做品牌化、样式风格定制的场景，需要通过 Semi DSM 进行配置，发布产物为 npm 主题包。Design Token的作用范围为全局生效。例如调整了 Button、Table 的组件级Token，那么对于 App 内所有 Semi Button、Semi Table 都会生效，无法仅针对某个特定子模块调整
- 如果你只需要将某个特定模块下的某个组件的样式做调整，不推荐使用 Design Token，推荐直接使用 CSS 选择器覆盖样式
Semi 2.x 与 Semi 1.x 有什么不同？
- Semi v2.0 版本 基于 v1.x 使用 ts 进行了重构，带来了更好的 ts 使用体验、以及更开箱即用的工程化方案，更好的a11y支持，支持局部启用暗色/亮色模式，解决了对微前端场景下多组件库共存的样式冲突问题等。Semi 2.x 为开源版本， Semi 团队后续所有长期工作都将基于 v2.x 版本进行
- v1.x 已停止迭代维护，不再进行feature添加或复杂变更，仅提供必要的 bug fix 变更。
- 我们建议大家直接使用 2.x @douyin/semi-ui 进行开发。现有旧项目，我们也建议大家尽快进行升级。为减轻升级成本，我们提供了 cli 工具一键迁移（@ies/semi-codemod-v2 ）可帮助大家自动完成高达 90%的迁移修改（受限于 AST 实现原理，仍存在一小部分 case 需人工 review 修改，但不多 😉 ）
- Semi 1.x 升级至 Semi 2.x 详细操作步骤请查阅 从 v1 到 v2
各版本之间的关系
- Semi 版本号遵循 Semver 规范（主版本号-次版本号-修订版本号），我们会在 minor 版本新增 feature 或组件，在 patch 版本我们仅会进行 bug 修复，而不会做新功能更新。但不同 minor 版本之间可能存在样式上的调整，当你需要升级时，我们推荐你在 changelog 页面使用版本 Diff 功能，检查所有变更并确实是否对你的业务系统有影响。
- 后续所有新 Feature、新组件都会基于 2.x 版本进行开发，我们推荐业务方尽可能地保持使用最新版本
- 2.x 各版本之间，API 会保持向前兼容
- 1.x 各版本之间，API 也会保持向前兼容。由 1.x 升级到 2.x 时，会包含 breaking change，具体升级注意事项请查阅文档
- 0.x 版本目前已停止更新，当且仅当必须进行 bugfix 时才会进行 hotfix 更新。由 0.x 升级至 1.x 时，会包含 breaking change，具体升级注意事项请查阅文档
Semi 是否支持 Tree Shaking
Semi 执行发包时，发布的其实是 esModule 源码，因此天然支持 tree shaking，不需要再进行额外的配置; 组件的 Scss 也是由组件的 index.(j|t)sx 负责 import 的，因此样式也会 shaking。简单来说，只有你使用的组件会被打包。
为什么 defaultValue、defaultXXX 不起作用？
Semi 组件中，所有的 defaultValue、defaultXXX 传参只会在组件被 mounted 时进行消费（即仅消费一次）。如果你的 defaultXXX 属性是后期进行异步更新的，组件不会重新进行消费该值。如有需要，你应该使用受控的 value，受控的 xxx。或者直接通过传入一个不一样的
key值，强制 React 重新挂载该组件。TS 类型检查报错，提示 xxx 上不存在属性 children 或 XXX 不能用作 JSX 组件
这是由于
@types/react v18 进行了 breaking change，大部分情况下你的项目里会安装了两个不同版本的 @types/react，导致无法匹配。请参考 Issue 793 锁定版本确保只有单个版本存在安装新版本 Semi 后，提示 can't resolve date-fns/esm/_libs/cloneObject.js 或其他有 date-fns 相关的依赖错误
检查下项目中的 package-lock.json，是否有其他包依赖了 date-fns（大概率是 1.x 的），导致 semi 依赖声明的 date-fns 2.x 没有被安装上。手动 install date-fns，确保是 2.x 版本的即可
npm install date-fns date-fns-tzSemi 支持 i18n 吗？
Semi 目前支持 21 种语言，具体使用可以查阅 Semi·LocaleProvider
Semi 的样式是基于 Scss 还是 Less ？为什么不用 CSS Module？
我们的样式基于 Scss，与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。不使用 CSS Module 是因为我们希望有固定的 className，为业务方保留修改/覆盖 Semi 样式的能力（虽然不提倡，但有些业务场景下确实需要）
为什么 Tooltip content 配置很长很长的内容时，某些情况下内容会超出显示区域?
在 v2.36.0 版本以前，考虑到不同语言内容（纯英文、中文、中英文混合、其他语种混合）对换行的需求不太一致，所以组件层没有做这个预设。在接收到较多使用反馈后，自 v2.36.0 版本，Tooltip 内部通过设置 word-wrap 为 break-word 处理文本换行。对于任意版本，如果默认设置不符合预期，使用方都可以通过 style/className API 设置换行相关 CSS 属性进行调整。
有新组件需求、或者现有组件 Feature 不能满足我的业务需求，该找谁？
在Github 提交 Issue，描述你的需求以及业务场景，Label 选择
Feature Request / New Component Request对组件的使用有疑惑？不知道有没有能满足你业务需求场景的组件？
欢迎进我们的 客服飞书 Lark 群 进行咨询提问。
希望自定义滚动条的样式？
可以使用
.semi-light-scrollbar 类名，会对 webkit (chrome/safari) 的浏览器应用 Semi 的滚动条样式。该类名放在最外层的 DOM 元素即可，会对所有子元素生效。注：使用了通配符，可能会对性能有影响。其他浏览器可以参考是否有相关的 css 属性支持滚动条的样式定制。