2.0 有哪些不兼容的变化

🎁 包名的调整

🔍 import 路径变化

引入组件

// before
import { Select, Input, Form } from '@ies/semi-ui-react';

// after
import { Select, Input, Form } from '@douyinfe/semi-ui';

引入 interface（TypeScript 项目）

// before
import { SelectProps } from '@ies/semi-ui-react/select';

// now
import { SelectProps } from '@douyinfe/semi-ui/lib/es/select';

引入 locale 资源文件

// before
import en_GB from '@ies/semi-ui-react/locale/source/en_GB';

// now
import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';

🛠 API 相关的调整

• Icon 相关
  • Icon 组件不再支持 type=xxx 方式使用内置 icon
  • 自定义 svg 不再支持插件方式配置 srcSvgPaths
  • Button icon 属性不再支持通过 string 传递内置 icon 或 iconType
  • Dropdown 删除 iconType 属性，统一为 icon 属性
  • Navigation
    • Nav.item 组件, Nav.Sub 组件 props.icon 不再支持通过 string 方式传入，需要传入 ReactNode
    • Nav 组件 props.items 中的 icon 也不再支持通过 string 方式传入，需要传入 ReactNode
  • Notification icon 不再支持通过 string 方式传入，请统一使用 ReactNode
  • Banner icon、closeIcon不再支持string，需要替换为对应的ReactNode
  • Typography.Text的icon不再支持string，需要替换为对应的ReactNode
  • Breadcrumb.Item的icon不再支持string，需要替换为对应的ReactNode
• AutoComplete 正式废弃 onChangeWithObject 属性
• Cascader triggerRender 的入参移除 onInputChange
• Form 不再从 semi-ui/index.js 导出 Label 组件，如需使用请用 Form.Label
• Tree onRightClick 更名为 onContextMenu
• Upload dragable 更名为 draggable
• Tooltip 不再支持 disabled 属性，依赖 Tooltip 的组件（如 Popover、Dropdown 等）透传给 Tooltip disabled 将失效
• Table
  • 不再在 componentDidUpdate 时响应的 API
    • defaultExpandAllRows，请用 expandAllRows 替换
    • defaultExpandRowKeys，请用 expandRowKeys 替换
    • defaultExpandAllGroupRows，请用 expandAllGroupRows 替换

🎨 样式上的不兼容

• CSS 变量添加 semi 前缀，例如 --color-primary => --semi-color-primary
  • 使用了 Semi CSS Variable 来实现暗色模式等特性的用户，需要将自定义 CSS 中的 variable 统一进行更新
  • 未在自定义组件或页面的中使用 Semi CSS Variable 的用户无需关注，不受影响
• 在 2.x，统一将插画的宽高设置为 200 * 200px，如果想模拟 1.x 的宽高，可以给插画设置 style={{ width: 300, height: 150 }}。
• Icon 组件的共有className 由 semi-icons 变更为 semi-icon，对齐组件命名

插件调整

• svg 相关
  • 2.x 不再支持 iconLazyLoad （因为已经支持Shaking）
  • svgPaths、srcSvgPaths 配置不再支持，你可以通过使用 svgr webpack 插件作为替换，详细可参考 Icon组件
• 暗色模式相关
  • 2.x 默认已支持局部暗色模式、亮色模式，不再需要在插件配置 themeScope 属性。使用方式由添加 id #semi-always-xxx 更新为添加 class .semi-always-xxx。

其他调整

Icon/插画使用调整

// 1.x 默认 iconLazyload 为 false 的情况
<Icon type="home" />;

// 1.x 当 iconLazyload 为 true 的情况
import homeSvg from '@ies/semi-icons/semi-icons-home.svg';
<Icon type={homeSvg.id} />;

// 2.x 统一使用如下方式使用
import { IconHome } from '@douyinfe/semi-icons';
<IconHome />;

// 1.x
import { Empty } from '@ies/semi-ui-react';
import Construction from '@ies/semi-illustrations/construction.svg';
<Empty image={Construction} />;

// 2.x
import { Empty } from '@douyinfe/semi-ui';
import { IllustrationConstruction } from '@douyinfe/semi-illustrations';
<Empty image={<IllustrationConstruction />} />;

Design Token 调整

FAQ

为什么引用路径发生了变化？

项目希望升级至 2.0，但项目中使用了 Semi 物料，物料基于 1.x Semi，是否可同时使用？

CSS 变量添加 semi 前缀的原因？

为什么局部暗色/亮色模式由添加 id 改为添加 class？

为什么插画的尺寸有变化？

其他与字节内部框架的兼容问题？

遇到问题