{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/ecosystem/update-to-v2","result":{"data":{"current":{"frontmatter":{"title":"Update 从 1.x 到 2.0","order":17,"brief":null,"icon":"doc-updateV2"},"fields":{"type":"ecosystem"},"tableOfContents":{"items":[{"items":[{"url":"#升级准备","title":"升级准备"},{"url":"#开始升级","title":"开始升级"},{"url":"#安装-semi-20","title":"安装 Semi 2.0"},{"url":"#修改代码","title":"修改代码","items":[{"items":[{"url":"#1全局安装自动升级工具","title":"1.全局安装自动升级工具:"},{"url":"#2使用-semi-codemod-v2-对项目代码进行扫描并对-breaking-change-进行自动修改","title":"2.使用 semi-codemod-v2 对项目代码进行扫描，并对 breaking change 进行自动修改"},{"url":"#3对于可识别但无法自动修改的部分codemod-会在命令行进行提示抛出-warning你需要建议按提示手动修改","title":"3.对于可识别但无法自动修改的部分，codemod 会在命令行进行提示，抛出 warning，你需要建议按提示手动修改"},{"url":"#4更新-css-variable-的使用方式","title":"4.更新 CSS Variable 的使用方式"},{"url":"#5更新主题包","title":"5.更新主题包"},{"url":"#6-运行你的项目进行dev构建对抛出error的代码段-进行修改","title":"6. 运行你的项目，进行dev构建。对抛出error的代码段 进行修改"},{"url":"#7执行-git-diff-review-所有代码改动回归相关页面","title":"7.执行 git diff review 所有代码改动，回归相关页面"}]}]}]},{"url":"#20-有哪些不兼容的变化","title":"2.0 有哪些不兼容的变化","items":[{"url":"#-包名的调整","title":"🎁 包名的调整"},{"url":"#-import-路径变化","title":"🔍 import 路径变化","items":[{"url":"#引入组件","title":"引入组件"},{"url":"#引入-interfacetypescript-项目","title":"引入 interface（TypeScript 项目）"},{"url":"#引入-locale-资源文件","title":"引入 locale 资源文件"}]},{"url":"#-api-相关的调整","title":"🛠 API 相关的调整"},{"url":"#-样式上的不兼容","title":"🎨 样式上的不兼容"},{"url":"#插件调整","title":"插件调整"},{"url":"#其他调整","title":"其他调整","items":[{"url":"#icon插画使用调整","title":"Icon/插画使用调整"},{"url":"#design-token-调整","title":"Design Token 调整"}]}]},{"url":"#faq","title":"FAQ","items":[{"url":"#为什么引用路径发生了变化","title":"为什么引用路径发生了变化？"},{"url":"#项目希望升级至-20但项目中使用了-semi-物料物料基于-1x-semi是否可同时使用","title":"项目希望升级至 2.0，但项目中使用了 Semi 物料，物料基于 1.x Semi，是否可同时使用？"},{"url":"#css-变量添加-semi-前缀的原因","title":"CSS 变量添加 semi 前缀的原因？"},{"url":"#为什么局部暗色亮色模式由添加-id-改为添加-class","title":"为什么局部暗色/亮色模式由添加 id 改为添加 class？"},{"url":"#为什么插画的尺寸有变化","title":"为什么插画的尺寸有变化？"},{"url":"#其他与字节内部框架的兼容问题","title":"其他与字节内部框架的兼容问题？"}]},{"url":"#遇到问题","title":"遇到问题"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"生态与帮助\",\n  \"title\": \"Update 从 1.x 到 2.0\",\n  \"icon\": \"doc-updateV2\",\n  \"localeCode\": \"zh-CN\",\n  \"order\": 17\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", null, \"\\u5347\\u7EA7\\u51C6\\u5907\"), mdx(\"p\", null, \"\\u8BF7\\u5C06\\u4F60\\u5F53\\u524D\\u6240\\u6709\\u5DF2\\u4FEE\\u6539\\u7684\\u4EE3\\u7801\\u63D0\\u4EA4\\uFF0Ccheckout \\u51FA\\u5355\\u72EC\\u7684 git \\u5206\\u652F\\uFF0C\\u4FDD\\u8BC1 git \\u5DE5\\u4F5C\\u533A\\u5E72\\u51C0\"), mdx(\"h3\", null, \"\\u5F00\\u59CB\\u5347\\u7EA7\"), mdx(\"h3\", null, \"\\u5B89\\u88C5 Semi 2.0\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm i @douyinfe/semi-ui@latest\\n\")), mdx(\"h3\", null, \"\\u4FEE\\u6539\\u4EE3\\u7801\"), mdx(\"p\", null, \"\\u5BF9\\u6D89\\u53CA\\u5230 breaking change \\u7684\\u4EE3\\u7801\\u8FDB\\u884C\\u4FEE\\u6539\\uFF0C\\u4F60\\u53EF\\u4EE5\\u624B\\u52A8\\u5BF9\\u7167\\u4E0B\\u65B9\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/start/update-to-v2#2.0%20%E6%9C%89%E5%93%AA%E4%BA%9B%E4%B8%8D%E5%85%BC%E5%AE%B9%E7%9A%84%E5%8F%98%E5%8C%96\"\n  }, \"\\u4E0D\\u517C\\u5BB9\\u5217\\u8868\"), \"\\u9010\\u6761\\u68C0\\u67E5\\u4EE3\\u7801\\u8FDB\\u884C\\u4FEE\\u6539\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u53E6\\u5916\\u6211\\u4EEC\\u4E5F\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A codemod cli \\u5DE5\\u5177\\u4EE5\\u5E2E\\u52A9\\u4F60\\u5FEB\\u901F\\u5347\\u7EA7\\u5230 2.0 \\u7248\\u672C\"), mdx(\"h5\", null, \"1.\\u5168\\u5C40\\u5B89\\u88C5\\u81EA\\u52A8\\u5347\\u7EA7\\u5DE5\\u5177:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm i @ies/semi-codemod-v2@latest -g # bnpm\\u6E90\\n\")), mdx(\"h5\", null, \"2.\\u4F7F\\u7528 semi-codemod-v2 \\u5BF9\\u9879\\u76EE\\u4EE3\\u7801\\u8FDB\\u884C\\u626B\\u63CF\\uFF0C\\u5E76\\u5BF9 breaking change \\u8FDB\\u884C\\u81EA\\u52A8\\u4FEE\\u6539\"), mdx(\"p\", null, \"\\u82E5\\u4F60\\u5E0C\\u671B\\u4E86\\u89E3 codemod\\u5177\\u4F53\\u505A\\u7684\\u81EA\\u52A8\\u53D8\\u66F4\\u8303\\u56F4\\uFF0C\\u53EF\\u4EE5\\u67E5\\u770B\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/wiki/About-semi-codemod-v2\"\n  }, \"\\u8FD9\\u7BC7\\u6587\\u6863\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"semi-codemod-v2 <ProjectPath> [options]\\n\\n//  options:\\n//    --dry,        Dry run (no changes are made to files)   \\u662F\\u5426\\u53EA\\u8FD0\\u884C\\u800C\\u4E0D\\u5C06\\u5B9E\\u9645\\u4FEE\\u6539\\u5199\\u5165\\u6587\\u4EF6\\n//    --force,      Whether ignore git status;               \\u4E3A true \\u65F6\\u5C06\\u4E0D\\u68C0\\u67E5 git \\u5DE5\\u4F5C\\u533A\\u662F\\u5426\\u5E72\\u51C0\\n//    --verbose=2,  Log level, optional: 0/1/2, default: 0   \\u65E5\\u5FD7\\u7EA7\\u522B\\n\")), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4F7F\\u7528\\u793A\\u4F8B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9700\\u6267\\u884C\\u547D\\u4EE4\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u5E0C\\u671B\\u626B\\u63CF\\u5E76\\u5347\\u7EA7\\u6574\\u4E2A\\u9879\\u76EE\\u7684\\u6240\\u6709\\u6587\\u4EF6\\u65F6\", mdx(\"br\", null), \"(\\u9879\\u76EE\\u8DEF\\u5F84\\u4E3Aroot/workspace/demo-project)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"semi-codemod-v2 root/workspace/demo-project\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EA\\u5E0C\\u671B\\u626B\\u63CF\\u5E76\\u5347\\u7EA7\\u5355\\u4E2A\\u6587\\u4EF6\\u65F6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"semi-codemod-v2 root/workspace/demo-project/testFile.jsx\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EA\\u5E0C\\u671B\\u626B\\u63CF\\u5E76\\u5347\\u7EA7\\u5355\\u4E2A\\u6587\\u4EF6\\u65F6\\uFF0C\\u4F46\\u53EA\\u5E0C\\u671B\\u5C06\\u53D8\\u66F4\\u7ED3\\u679C\\u8F93\\u51FA\\u81F3 terminal\\uFF0C\\u800C\\u4E0D\\u5C06\\u5B9E\\u9645\\u4FEE\\u6539\\u5199\\u5165\\u6587\\u4EF6\\u65F6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"semi-codemod-v2 root/workspace/demo-project/testFile.jsx --dry\"))))), mdx(\"br\", null), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/codemod.gif\",\n    \"alt\": \"codemod\"\n  })), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"// \\u547D\\u4EE4\\u884C Result \\u8F93\\u51FA\\u8BF4\\u660E\\nResults:\\n  0 errors       // \\u8FD0\\u884C\\u8BE5\\u8F6C\\u6362\\u89C4\\u5219\\uFF0C\\u4F46\\u5728\\u6267\\u884C\\u66FF\\u6362\\u8FC7\\u7A0B\\u53D1\\u751F\\u4E86\\u9519\\u8BEF\\u7684\\u6587\\u4EF6\\u4E2A\\u6570\\n  13 unmodified  // \\u7B26\\u5408\\u8BE5\\u6761\\u5339\\u914D\\u89C4\\u5219\\uFF0C\\u4F46\\u6CA1\\u6709\\u8FDB\\u884C\\u4FEE\\u6539\\uFF08\\u5373\\u4F7F\\u7528\\u4E86\\u8BE5\\u7EC4\\u4EF6\\uFF0C\\u4F46\\u6CA1\\u6709\\u6D89\\u53CA\\u5230\\u76F8\\u5173\\u5E9F\\u5F03\\u7684API\\uFF09\\u7684\\u6587\\u4EF6\\u4E2A\\u6570\\n  158 skipped    // \\u4E0D\\u7B26\\u5408\\u8BE5\\u6761\\u5339\\u914D\\u89C4\\u5219\\uFF0C\\u5DF2\\u8DF3\\u8FC7\\u7684\\u6587\\u4EF6\\u4E2A\\u6570\\n  4 ok           // \\u5171\\u67094\\u4E2A\\u6587\\u4EF6\\u7B26\\u5408\\u66FF\\u6362\\u89C4\\u5219\\uFF0Ccli\\u5DF2\\u8FDB\\u884C\\u4E86\\u81EA\\u52A8\\u4FEE\\u6539\\nTime elapsed: 5.398seconds\\n\")), mdx(\"h5\", null, \"3.\\u5BF9\\u4E8E\\u53EF\\u8BC6\\u522B\\u4F46\\u65E0\\u6CD5\\u81EA\\u52A8\\u4FEE\\u6539\\u7684\\u90E8\\u5206\\uFF0Ccodemod \\u4F1A\\u5728\\u547D\\u4EE4\\u884C\\u8FDB\\u884C\\u63D0\\u793A\\uFF0C\\u629B\\u51FA warning\\uFF0C\\u4F60\\u9700\\u8981\\u5EFA\\u8BAE\\u6309\\u63D0\\u793A\\u624B\\u52A8\\u4FEE\\u6539\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/waringDemo.png\",\n    \"alt\": \"warning\"\n  }), \"\\n\\u6240\\u6709 warning \\u65E5\\u5FD7\\u4F1A\\u5728 ProjectPath \\u4E0B semi-codemod-log.log \\u6587\\u4EF6\\u8FDB\\u884C\\u8F93\\u51FA\\uFF0C\\u4F60\\u53EF\\u4EE5\\u6309\\u7167log\\u65E5\\u5FD7\\u9010\\u6761\\u68C0\\u67E5\\u4FEE\\u6539\"), mdx(\"h5\", null, \"4.\\u66F4\\u65B0 CSS Variable \\u7684\\u4F7F\\u7528\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u82E5\\u4F60\\u5728\\u4EE3\\u7801\\u4E2D\\u4F7F\\u7528\\u4E86 Semi \\u7684 CSS Variable\\uFF0C\\u9664\\u4E86\\u9700\\u8981\\u4F7F\\u7528 semi-codemod-v2 \\u5916\\uFF0C\\u4F60\\u8FD8\\u9700\\u8981\\u4F7F\\u7528\\u6211\\u4EEC\\u63D0\\u4F9B\\u7684 style-lint \\u5DE5\\u5177\\uFF0C\\u5BF9\\u6240\\u6709 CSS Variable \\u7684\\u4F7F\\u7528\\u8FDB\\u884C\\u81EA\\u52A8\\u66F4\\u65B0\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5B89\\u88C5 Semi style-lint \\u5305\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"# \\u9700\\u6307\\u5B9A npm \\u6E90\\u4E3A bnpm\\nnpm i -D @ies/stylelint-semi@2.0.0-alpha.1\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u521B\\u5EFA\\u6216\\u4FEE\\u6539 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \".stylelintrc.json\"), \" \\u6587\\u4EF6\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"plugins\\\": [\\\"@ies/stylelint-semi\\\"],\\n  \\\"rules\\\": {\\n    \\\"semi/css-token-migrate\\\": [true, { \\\"severity\\\": \\\"warning\\\" }]\\n  }\\n}\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"CSS Token \\u4ECE 1.x \\u5347\\u7EA7\\u4E3A 2.x\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"# \\\"**/*.scss\\\" \\u6216\\u8005\\u5176\\u4ED6\\u6587\\u4EF6/\\u76EE\\u5F55\\uFF0C\\u53EF\\u4EE5\\u5904\\u7406 JSX\\u3001TSX\\u3001CSS\\u3001SCSS\\u3001LESS \\u7B49\\u683C\\u5F0F\\u7684\\u6587\\u4EF6\\nnpx stylelint \\\"**/*.scss\\\" --fix    // \\u5904\\u7406scss\\u4E2D\\u7684 CSS \\u53D8\\u91CF\\nnpx stylelint \\\"**/*.tsx\\\" --fix     // \\u5904\\u7406tsx\\u4E2D\\u7684\\u5185\\u8054style\\u4E2D\\u7684 CSS \\u53D8\\u91CF\\nnpx stylelint \\\"**/*.jsx\\\" --fix     // \\u5904\\u7406jsx\\u4E2D\\u7684\\u5185\\u8054style\\u4E2D\\u7684 CSS \\u53D8\\u91CF\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u81EA\\u52A8\\u66FF\\u6362\\u4F9D\\u8D56 stylelint\\uFF0C\\u4EC5\\u66FF\\u6362\\u5728\\u6837\\u5F0F\\u6587\\u4EF6\\u6216 style \\u5C5E\\u6027\\u91CC\\u7684\\u989C\\u8272\\u53D8\\u91CF\\uFF08\\u5F15\\u7528\\u7684\\u503C\\u4E0D\\u4F1A\\u66FF\\u6362\\uFF09\\uFF0C\\u5EFA\\u8BAE\\u66FF\\u6362\\u540E\\u5168\\u5C40\\u641C\\u7D22\\u4E00\\u4E0B\\u6CA1\\u6709\\u66FF\\u6362\\u5E72\\u51C0\\u7684\\u5730\\u65B9\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"// replace '--amber-0' to '--semi-amber-0'\\nconst searchReg = /--((amber|black|blue|cyan|green|grey|indigo|light|lime|orange|pink|purple|red|teal|violet|yellow|white|color|shadow|overlay|border|gray)(-[a-z\\\\d]+)*)/;\\nconst replaceReg = /--semi-$1/;\\n\")), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vscode-semi-token-replace.png\",\n    \"alt\": \"VS Code token replace\"\n  })), mdx(\"h5\", null, \"5.\\u66F4\\u65B0\\u4E3B\\u9898\\u5305\"), mdx(\"p\", null, \"\\u82E5\\u4F60\\u7684\\u9879\\u76EE\\u4E2D\\u4F7F\\u7528\\u4E86\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\\u5305\\uFF0C\\u9700\\u8981\\u524D\\u5F80 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm\"\n  }, \"Semi DSM\"), \" \\uFF08\\u5373\\u539F Semi \\u4E3B\\u9898\\u5546\\u5E97\\u7684\\u5347\\u7EA7\\u7248\\uFF09\\u8FDB\\u884C 2.x \\u7248\\u672C\\u4E3B\\u9898\\u5305\\u7684\\u53D1\\u5E03\\u3002\\u5E76\\u5C06\\u65B0\\u7248\\u4E3B\\u9898 npm \\u5305\\u5B89\\u88C5\\u81F3\\u9879\\u76EE\\u5185\\u3002\\n\\u6CE8\\u610F Semi V1 \\u7684\\u4E3B\\u9898\\u5305 \\u4E0E Semi V2 \\u5E76\\u4E0D\\u517C\\u5BB9\\uFF0C\\u8BF7\\u52A1\\u5FC5\\u91CD\\u65B0\\u53D1\\u5E03\\u3002\"), mdx(\"h5\", null, \"6. \\u8FD0\\u884C\\u4F60\\u7684\\u9879\\u76EE\\uFF0C\\u8FDB\\u884Cdev\\u6784\\u5EFA\\u3002\\u5BF9\\u629B\\u51FAerror\\u7684\\u4EE3\\u7801\\u6BB5 \\u8FDB\\u884C\\u4FEE\\u6539\"), mdx(\"p\", null, \"\\u7531\\u4E8E codemod \\u4F9D\\u8D56 AST\\u8BED\\u6CD5\\u6811\\u8FDB\\u884C\\u5206\\u6790\\u5E76\\u66FF\\u6362\\uFF0C\\u4E0D\\u6392\\u9664\\u6709\\u4F9D\\u9760 AST \\u5206\\u6790\\u65E0\\u6CD5\\u68C0\\u6D4B\\u7684\\u60C5\\u51B5\\u3002\\u4E14\\u7531\\u4E8E\\u6211\\u4EEC\\u57282.x\\u7248\\u672C\\u8FDB\\u884C\\u4E86 TS\\u91CD\\u6784\\uFF0C\\u76F8\\u5173\\u7C7B\\u578B\\u5B9A\\u4E49\\u4F1A\\u6BD41.x\\u66F4\\u52A0\\u4E25\\u683C\\u3002\\u53EF\\u80FD\\u5B58\\u5728\\u90E8\\u5206\\u7C7B\\u578B\\u68C0\\u67E5\\u5728 1.x\\u80FD\\u901A\\u8FC7\\uFF0C\\u57282.x\\u65E0\\u6CD5\\u901A\\u8FC7\\u7F16\\u8BD1\\u7684\\u60C5\\u51B5\\u3002\\n\\u8FD9\\u7C7Bcase\\u5728\\u6784\\u5EFA\\u9636\\u6BB5\\u4F1A\\u76F4\\u63A5\\u66B4\\u9732\\uFF0C\\u56E0\\u6B64\\u4F60\\u53EF\\u4EE5case by case\\u76F4\\u63A5\\u8FDB\\u884C\\u5BF9\\u5E94\\u4FEE\\u6539\\u3002\"), mdx(\"h5\", null, \"7.\\u6267\\u884C git diff review \\u6240\\u6709\\u4EE3\\u7801\\u6539\\u52A8\\uFF0C\\u56DE\\u5F52\\u76F8\\u5173\\u9875\\u9762\"), mdx(\"p\", null, \"\\u81F3\\u6B64\\uFF0C\\u4F60\\u5DF2\\u5B8C\\u6210\\u6240\\u6709\\u5347\\u7EA7\\u6B65\\u9AA4\\uD83E\\uDD73\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5C3D\\u7BA1\\u6211\\u4EEC\\u5C3D\\u53EF\\u80FD\\u5730\\u8003\\u8651\\u4E86\\u7528\\u6237\\u7684\\u4F7F\\u7528\\u573A\\u666F\\uFF0C\\u4F46\\u4ECD\\u4E0D\\u80FD\\u6392\\u9664\\u4F1A\\u6709\\u9057\\u6F0F\\u6216\\u4F9D\\u9760 AST \\u5206\\u6790\\u65E0\\u6CD5\\u68C0\\u6D4B\\u7684\\u60C5\\u51B5\\uFF08\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://bytedance.feishu.cn/docs/doccnOIgRqiqeBkhYzro1Bmvd8e#\"\n  }, \"\\u5F53\\u524D\\u5DF2\\u77E5\\u7684\\u65E0\\u6CD5\\u88AB\\u68C0\\u6D4B\\u6216\\u4FEE\\u6539\\u7684Case\"), \"\\uFF09\\uFF0Ccodemod \\u7684\\u81EA\\u52A8\\u4FEE\\u6539/\\u68C0\\u6D4B\\u53EF\\u80FD\\u4E0D\\u80FD\\u8986\\u76D6\\u6240\\u6709\\u573A\\u666F\\u3002\\u5982\\u679C\\u53D1\\u73B0\\u6709 codemod\\u672A\\u8986\\u76D6\\u7684case\\uFF0C\\u53EF\\u4EE5\\u62C9\\u8D77oncall\\u8FDB\\u884C\\u53CD\\u9988\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u8BF7\\u5BF9\\u6240\\u6709\\u6D89\\u53CA\\u6539\\u52A8\\u7684\\u9875\\u9762\\u8FDB\\u884C\\u56DE\\u5F52\\u6D4B\\u8BD5\\u3002\"), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"2.0 \\u6709\\u54EA\\u4E9B\\u4E0D\\u517C\\u5BB9\\u7684\\u53D8\\u5316\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\uD83C\\uDF81 \\u5305\\u540D\\u7684\\u8C03\\u6574\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"v2.0 Semi \\u6B63\\u5F0F\\u5F00\\u6E90\\u53D1\\u5E03\\u81F3\\u516C\\u7F51 npm\\uFF0C\\u5305\\u540D\\u9700\\u8981\\u8C03\\u6574\\uFF0C\\u53BB\\u9664\\u539F\\u6709\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@ies\"), \" \\u524D\\u7F00\\uFF0C\\u66F4\\u65B0\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@douyinfe\"), \" \\u524D\\u7F00\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\uD83D\\uDD0D import \\u8DEF\\u5F84\\u53D8\\u5316\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5F15\\u5165\\u7EC4\\u4EF6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"// before\\nimport { Select, Input, Form } from '@ies/semi-ui-react';\\n\\n// after\\nimport { Select, Input, Form } from '@douyinfe/semi-ui';\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5F15\\u5165 interface\\uFF08TypeScript \\u9879\\u76EE\\uFF09\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6240\\u6709 Interface \\u7684\\u76F8\\u5173\\u53D8\\u66F4\\u53EF\\u67E5\\u9605 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://bytedance.feishu.cn/docs/doccn5abrdIWvXO7No0Wkh8zo4b\"\n  }, \"Semi 1.x -> 2.0 TS interface\\u53D8\\u66F4\\u8BE6\\u7EC6\\u8BB0\\u5F55\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"// before\\nimport { SelectProps } from '@ies/semi-ui-react/select';\\n\\n// now\\nimport { SelectProps } from '@douyinfe/semi-ui/lib/es/select';\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5F15\\u5165 locale \\u8D44\\u6E90\\u6587\\u4EF6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"// before\\nimport en_GB from '@ies/semi-ui-react/locale/source/en_GB';\\n\\n// now\\nimport en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\uD83D\\uDEE0 API \\u76F8\\u5173\\u7684\\u8C03\\u6574\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Icon \\u76F8\\u5173\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Icon \\u7EC4\\u4EF6\\u4E0D\\u518D\\u652F\\u6301 type=xxx \\u65B9\\u5F0F\\u4F7F\\u7528\\u5185\\u7F6E icon\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u81EA\\u5B9A\\u4E49 svg \\u4E0D\\u518D\\u652F\\u6301\\u63D2\\u4EF6\\u65B9\\u5F0F\\u914D\\u7F6E srcSvgPaths\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Button icon \\u5C5E\\u6027\\u4E0D\\u518D\\u652F\\u6301\\u901A\\u8FC7 string \\u4F20\\u9012\\u5185\\u7F6E icon \\u6216 iconType\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dropdown \\u5220\\u9664 iconType \\u5C5E\\u6027\\uFF0C\\u7EDF\\u4E00\\u4E3A icon \\u5C5E\\u6027\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navigation\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Nav.item \\u7EC4\\u4EF6, Nav.Sub \\u7EC4\\u4EF6 props.icon \\u4E0D\\u518D\\u652F\\u6301\\u901A\\u8FC7 string \\u65B9\\u5F0F\\u4F20\\u5165\\uFF0C\\u9700\\u8981\\u4F20\\u5165 ReactNode\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Nav \\u7EC4\\u4EF6 props.items \\u4E2D\\u7684 icon \\u4E5F\\u4E0D\\u518D\\u652F\\u6301\\u901A\\u8FC7 string \\u65B9\\u5F0F\\u4F20\\u5165\\uFF0C\\u9700\\u8981\\u4F20\\u5165 ReactNode\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Notification icon \\u4E0D\\u518D\\u652F\\u6301\\u901A\\u8FC7 string \\u65B9\\u5F0F\\u4F20\\u5165\\uFF0C\\u8BF7\\u7EDF\\u4E00\\u4F7F\\u7528 ReactNode\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Banner icon\\u3001closeIcon\\u4E0D\\u518D\\u652F\\u6301string\\uFF0C\\u9700\\u8981\\u66FF\\u6362\\u4E3A\\u5BF9\\u5E94\\u7684ReactNode\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Typography.Text\\u7684icon\\u4E0D\\u518D\\u652F\\u6301string\\uFF0C\\u9700\\u8981\\u66FF\\u6362\\u4E3A\\u5BF9\\u5E94\\u7684ReactNode\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Breadcrumb.Item\\u7684icon\\u4E0D\\u518D\\u652F\\u6301string\\uFF0C\\u9700\\u8981\\u66FF\\u6362\\u4E3A\\u5BF9\\u5E94\\u7684ReactNode\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"AutoComplete \\u6B63\\u5F0F\\u5E9F\\u5F03 onChangeWithObject \\u5C5E\\u6027\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cascader triggerRender \\u7684\\u5165\\u53C2\\u79FB\\u9664 onInputChange\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Form \\u4E0D\\u518D\\u4ECE \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"semi-ui/index.js\"), \" \\u5BFC\\u51FA Label \\u7EC4\\u4EF6\\uFF0C\\u5982\\u9700\\u4F7F\\u7528\\u8BF7\\u7528 Form.Label\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tree onRightClick \\u66F4\\u540D\\u4E3A onContextMenu\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Upload dragable \\u66F4\\u540D\\u4E3A draggable\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tooltip \\u4E0D\\u518D\\u652F\\u6301 disabled \\u5C5E\\u6027\\uFF0C\\u4F9D\\u8D56 Tooltip \\u7684\\u7EC4\\u4EF6\\uFF08\\u5982 Popover\\u3001Dropdown \\u7B49\\uFF09\\u900F\\u4F20\\u7ED9 Tooltip disabled \\u5C06\\u5931\\u6548\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Table\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0D\\u518D\\u5728 componentDidUpdate \\u65F6\\u54CD\\u5E94\\u7684 API\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"defaultExpandAllRows\\uFF0C\\u8BF7\\u7528 expandAllRows \\u66FF\\u6362\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"defaultExpandRowKeys\\uFF0C\\u8BF7\\u7528 expandRowKeys \\u66FF\\u6362\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"defaultExpandAllGroupRows\\uFF0C\\u8BF7\\u7528 expandAllGroupRows \\u66FF\\u6362\")))))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\uD83C\\uDFA8 \\u6837\\u5F0F\\u4E0A\\u7684\\u4E0D\\u517C\\u5BB9\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"CSS \\u53D8\\u91CF\\u6DFB\\u52A0 semi \\u524D\\u7F00\\uFF0C\\u4F8B\\u5982 --color-primary => --semi-color-primary\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u4E86 Semi CSS Variable \\u6765\\u5B9E\\u73B0\\u6697\\u8272\\u6A21\\u5F0F\\u7B49\\u7279\\u6027\\u7684\\u7528\\u6237\\uFF0C\\u9700\\u8981\\u5C06\\u81EA\\u5B9A\\u4E49 CSS \\u4E2D\\u7684 variable \\u7EDF\\u4E00\\u8FDB\\u884C\\u66F4\\u65B0\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u672A\\u5728\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u6216\\u9875\\u9762\\u7684\\u4E2D\\u4F7F\\u7528 Semi CSS Variable \\u7684\\u7528\\u6237\\u65E0\\u9700\\u5173\\u6CE8\\uFF0C\\u4E0D\\u53D7\\u5F71\\u54CD\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728 2.x\\uFF0C\\u7EDF\\u4E00\\u5C06\\u63D2\\u753B\\u7684\\u5BBD\\u9AD8\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"200 * 200px\"), \"\\uFF0C\\u5982\\u679C\\u60F3\\u6A21\\u62DF 1.x \\u7684\\u5BBD\\u9AD8\\uFF0C\\u53EF\\u4EE5\\u7ED9\\u63D2\\u753B\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"style={{ width: 300, height: 150 }}\"), \"\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Icon \\u7EC4\\u4EF6\\u7684\\u5171\\u6709className \\u7531 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"semi-icons\"), \" \\u53D8\\u66F4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"semi-icon\"), \"\\uFF0C\\u5BF9\\u9F50\\u7EC4\\u4EF6\\u547D\\u540D\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u63D2\\u4EF6\\u8C03\\u6574\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u4F7F\\u7528 Semi \\u63D2\\u4EF6\\uFF0C\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@ies/semi-ui-plugin-webpack\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@ies/semi-ui-plugin-eden\"), \" \\u7B49\\u8FDB\\u884C\\u4E86\\u9AD8\\u7EA7\\u914D\\u7F6E\\uFF0C\\u9700\\u8981\\u4E86\\u89E3\\u4EE5\\u4E0B\\u53D8\\u66F4\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"svg \\u76F8\\u5173\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"2.x \\u4E0D\\u518D\\u652F\\u6301 iconLazyLoad \\uFF08\\u56E0\\u4E3A\\u5DF2\\u7ECF\\u652F\\u6301Shaking\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"svgPaths\\u3001srcSvgPaths \\u914D\\u7F6E\\u4E0D\\u518D\\u652F\\u6301\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F7F\\u7528 svgr webpack \\u63D2\\u4EF6\\u4F5C\\u4E3A\\u66FF\\u6362\\uFF0C\\u8BE6\\u7EC6\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/icon#%E4%BD%BF%E7%94%A8svgr%E5%B0%86svg%E6%96%87%E4%BB%B6%E8%BD%AC%E6%88%90ReactComponent\"\n  }, \"Icon\\u7EC4\\u4EF6\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6697\\u8272\\u6A21\\u5F0F\\u76F8\\u5173\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"2.x \\u9ED8\\u8BA4\\u5DF2\\u652F\\u6301\\u5C40\\u90E8\\u6697\\u8272\\u6A21\\u5F0F\\u3001\\u4EAE\\u8272\\u6A21\\u5F0F\\uFF0C\\u4E0D\\u518D\\u9700\\u8981\\u5728\\u63D2\\u4EF6\\u914D\\u7F6E themeScope \\u5C5E\\u6027\\u3002\\u4F7F\\u7528\\u65B9\\u5F0F\\u7531\\u6DFB\\u52A0 id #semi-always-xxx \\u66F4\\u65B0\\u4E3A\\u6DFB\\u52A0 class .semi-always-xxx\\u3002\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5176\\u4ED6\\u8C03\\u6574\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Icon/\\u63D2\\u753B\\u4F7F\\u7528\\u8C03\\u6574\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728 0.x/1.x \\u7248\\u672C\\u7684 Semi \\u4E2D\\uFF0C\\u6211\\u4EEC\\u5F3A\\u4F9D\\u8D56 svg-sprite-loader \\u5C06 svg \\u6587\\u4EF6\\u8F6C\\u6362\\u4E3A svg symbol \\u5E76\\u5728\\u8FD0\\u884C\\u65F6\\u63D2\\u5165 body\\uFF0C\\u4F7F\\u5F97\\u6211\\u4EEC\\u53EF\\u4EE5\\u4EC5\\u901A\\u8FC7 <Icon type='xxx' / > \\u4EE5\\u5B57\\u7B26\\u4E32\\u7684\\u65B9\\u5F0F\\u53BB\\u4F7F\\u7528 Icon \\u56FE\\u6807\\u3002\\u5728\\u4FBF\\u6377\\u4F7F\\u7528\\u7684\\u540C\\u65F6\\uFF0C\\u4E5F\\u5E26\\u6765\\u4E86\\u4E00\\u4E9B\\u95EE\\u9898\\uFF1Aicon \\u9ED8\\u8BA4\\u5168\\u91CF\\u5F15\\u5165\\uFF0C\\u65E0\\u6CD5\\u88AB shaking\\uFF1Bsvg-sprite-loader \\u4E0E Webpack \\u5F3A\\u7ED1\\u5B9A\\uFF0C\\u65E0\\u6CD5\\u4FBF\\u6377\\u5730\\u652F\\u6301 Rollup\\u3001Vite \\u7B49\\u5176\\u4ED6\\u6784\\u5EFA\\u65B9\\u6848\\u3002\\u56E0\\u6B64 2.0 \\u4E2D\\uFF0C\\u6211\\u4EEC\\u53BB\\u9664\\u4E86\\u4E0E svg-sprite-loader \\u7684\\u5F3A\\u7ED1\\u5B9A\\uFF0CIcon \\u7684\\u6D88\\u8D39\\u65B9\\u5F0F\\u9700\\u8981\\u53D8\\u66F4\\uFF1A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Icon \\u4F7F\\u7528\\u8C03\\u6574\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"// 1.x \\u9ED8\\u8BA4 iconLazyload \\u4E3A false \\u7684\\u60C5\\u51B5\\n<Icon type=\\\"home\\\" />;\\n\\n// 1.x \\u5F53 iconLazyload \\u4E3A true \\u7684\\u60C5\\u51B5\\nimport homeSvg from '@ies/semi-icons/semi-icons-home.svg';\\n<Icon type={homeSvg.id} />;\\n\\n// 2.x \\u7EDF\\u4E00\\u4F7F\\u7528\\u5982\\u4E0B\\u65B9\\u5F0F\\u4F7F\\u7528\\nimport { IconHome } from '@douyinfe/semi-icons';\\n<IconHome />;\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u63D2\\u753B\\u4F7F\\u7528\\u8C03\\u6574\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-text\"\n  }, \"// 1.x\\nimport { Empty } from '@ies/semi-ui-react';\\nimport Construction from '@ies/semi-illustrations/construction.svg';\\n<Empty image={Construction} />;\\n\\n// 2.x\\nimport { Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationConstruction } from '@douyinfe/semi-illustrations';\\n<Empty image={<IllustrationConstruction />} />;\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Design Token \\u8C03\\u6574\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EC4\\u4EF6\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Sass \\u53D8\\u91CF\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8C03\\u6574\\u524D\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8C03\\u6574\\u540E\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Popconfirm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$color-popconfirm_body-text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"var(--semi-color-tertiary)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"var(--semi-color-text-2)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$color-popconfirm_header_alert-icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"#fa7500\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"var(--semi-color-warning)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Progress\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$spacing-progress_line_text-marginLeft\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"15px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$spacing-base\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$spacing-progress_line_text-marginRight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"15px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$spacing-base\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Radio\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$spacing-radio_addon_buttonRadio_large-paddingY\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"6px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$spacing-base-tight / 2\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\\$radius-radio_cardRadioGroup\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3px\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"var(--semi-border-radius-small)\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u5F15\\u7528\\u8DEF\\u5F84\\u53D1\\u751F\\u4E86\\u53D8\\u5316\\uFF1F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728 1.x \\u4E2D\\uFF0CSemi \\u91C7\\u7528\\u6E90\\u7801\\u53D1\\u5E03\\u7684\\u65B9\\u5F0F\\uFF0C\\u6267\\u884C npm publish \\u524D\\u4E0D\\u4F1A\\u6267\\u884C\\u9884\\u7F16\\u8BD1\\uFF0C\\u7EC4\\u4EF6\\u5E93\\u7684 Scss\\u3001jsx/js \\u4F1A\\u8DDF\\u968F\\u4E1A\\u52A1\\u4EE3\\u7801\\u4E00\\u540C\\u8FDB\\u884C\\u7F16\\u8BD1\\uFF0C2.0 \\u4E2D npm publish \\u524D\\u8FDB\\u884C\\u4E86\\u9884\\u7F16\\u8BD1\\uFF0C\\u5BF9\\u4E8E\\u666E\\u901A\\u7528\\u6237\\u6765\\u8BF4\\uFF0C\\u9884\\u7F16\\u8BD1\\u53EF\\u4EE5\\u8BA9 Semi \\u505A\\u5230\\u5F00\\u7BB1\\u5373\\u7528\\uFF1A\\u65E0\\u9700\\u8BA9\\u7528\\u6237\\u7F16\\u8BD1 Semi \\u6E90\\u6587\\u4EF6\\uFF0C\\u65E0\\u9700\\u5728\\u4F7F\\u7528\\u65F6\\u5F15\\u5165 Semi \\u63D2\\u4EF6\\u3002\\u7531\\u4E8E\\u7F16\\u8BD1\\u540E\\u7684\\u7ED3\\u679C\\u5728 lib/es \\u4E0B\\uFF0C\\u56E0\\u6B64\\u63A5\\u53E3\\u548C\\u8BED\\u8A00\\u5305\\u7684\\u5F15\\u7528\\u8DEF\\u5F84\\u53D1\\u751F\\u4E86\\u53D8\\u5316\\uFF0C\\u4F46\\u5BF9\\u4E8E\\u7EC4\\u4EF6\\u5F15\\u7528\\uFF0C\\u4F60\\u65E0\\u9700\\u6539\\u53D8\\u539F\\u6709\\u7684\\u5F15\\u7528\\u8DEF\\u5F84\\uFF08\\u56E0\\u4E3A package.json main \\u5C5E\\u6027\\u6307\\u5411 lib/es/index.js\\uFF09\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9879\\u76EE\\u5E0C\\u671B\\u5347\\u7EA7\\u81F3 2.0\\uFF0C\\u4F46\\u9879\\u76EE\\u4E2D\\u4F7F\\u7528\\u4E86 Semi \\u7269\\u6599\\uFF0C\\u7269\\u6599\\u57FA\\u4E8E 1.x Semi\\uFF0C\\u662F\\u5426\\u53EF\\u540C\\u65F6\\u4F7F\\u7528\\uFF1F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E0D\\u53EF\\u4EE5\\uFF0Csemi2.x\\u7684css\\u7C7B\\u540D\\u4E0Esemi1.x\\u7684\\u76F8\\u540C\\uFF0C\\u540C\\u65F6\\u4F7F\\u7528\\u4F1A\\u5BFC\\u81F4\\u6837\\u5F0F\\u51B2\\u7A81\\u3002\\u5982\\u9047\\u5230\\u7C7B\\u4F3C\\u95EE\\u9898\\uFF0C\\u8BF7\\u5728\\u98DE\\u4E66\\u7FA4\\u91CC\\u53D1\\u8D77oncall\\uFF0C\\u4F1A\\u6709\\u4E13\\u4EBA\\u5BF9\\u63A5\\u5904\\u7406\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"CSS \\u53D8\\u91CF\\u6DFB\\u52A0 semi \\u524D\\u7F00\\u7684\\u539F\\u56E0\\uFF1F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7531\\u4E8E\\u4E1A\\u52A1\\u65B9\\u5FAE\\u524D\\u7AEF\\u5E94\\u7528\\u573A\\u666F\\u65E5\\u6E10\\u589E\\u591A\\uFF0C\\u4E3A\\u907F\\u514D\\u4E0E\\u5176\\u4ED6 library css variable \\u7684\\u547D\\u540D\\u51B2\\u7A81\\uFF0C\\u89C4\\u907F\\u6837\\u5F0F\\u4E92\\u76F8\\u5F71\\u54CD\\u95EE\\u9898\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u5C40\\u90E8\\u6697\\u8272/\\u4EAE\\u8272\\u6A21\\u5F0F\\u7531\\u6DFB\\u52A0 id \\u6539\\u4E3A\\u6DFB\\u52A0 class\\uFF1F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"id \\u5177\\u6709\\u8BED\\u4E49\\u4E0A\\u5168\\u5C40\\u552F\\u4E00\\u7684\\u7279\\u70B9\\uFF0Cclass \\u5219\\u6CA1\\u6709\\u8FD9\\u4E2A\\u7279\\u70B9\\uFF0C\\u4F7F\\u7528 class \\u66F4\\u7B26\\u5408\\u89C4\\u8303\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u63D2\\u753B\\u7684\\u5C3A\\u5BF8\\u6709\\u53D8\\u5316\\uFF1F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u63D2\\u753B\\u65F6\\uFF0C1.x \\u7684\\u63D2\\u753B\\u5BBD\\u9AD8\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"300 * 150px\"), \"\\uFF0C\\u662F\\u7531\\u4E8E\\u63D2\\u753B svg \\u5916\\u5C42\\u5D4C\\u5957 svg \\u5BFC\\u81F4\\uFF0C\\u8FD9\\u4E00\\u72B6\\u51B5\\u5BFC\\u81F4\\uFF0C\\u539F\\u6709\\u7684\\u63D2\\u753B\\u5DE6\\u53F3\\u591A\\u4E86\\u7A7A\\u767D\\uFF0C\\u4E0D\\u592A\\u7B26\\u5408\\u9884\\u671F\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5176\\u4ED6\\u4E0E\\u5B57\\u8282\\u5185\\u90E8\\u6846\\u67B6\\u7684\\u517C\\u5BB9\\u95EE\\u9898\\uFF1F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u8282\\u8DF3\\u52A8\\u7528\\u6237\\uFF0C\\u8BF7\\u67E5\\u9605\\u5BF9\\u5E94\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://bytedance.feishu.cn/docx/doxcnkrOpKFwK9ugkkcfAsUJqYd\"\n  }, \"\\u98DE\\u4E66\\u6587\\u6863\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u9047\\u5230\\u95EE\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u5217\\u51FA\\u4E86\\u5DF2\\u77E5\\u7684\\u6240\\u6709\\u4E0D\\u517C\\u5BB9\\u53D8\\u5316\\u548C\\u76F8\\u5173\\u5F71\\u54CD\\uFF0C\\u4F46\\u662F\\u6709\\u53EF\\u80FD\\u8FD8\\u662F\\u6709\\u4E00\\u4E9B\\u573A\\u666F\\u6211\\u4EEC\\u6CA1\\u6709\\u8003\\u8651\\u5230\\u3002\\u5982\\u679C\\u4F60\\u5728\\u5347\\u7EA7\\u8FC7\\u7A0B\\u4E2D\\u9047\\u5230\\u4E86\\u95EE\\u9898\\uFF0C\\u6B22\\u8FCE\\u968F\\u65F6\\u901A\\u8FC7\\u5BA2\\u670D\\u7FA4\\u8FDB\\u884C\\u53CD\\u9988\\u6C9F\\u901A\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/ecosystem/update-to-v2","next":{"fields":{"slug":"en-US/basic/tokens"},"id":"99c572d9-fc73-53b0-9d27-58638ef49271","frontmatter":{"title":"Tokens","localeCode":"en-US","icon":"doc-token","showNew":null}},"previous":{"fields":{"slug":"en-US/ecosystem/update-to-v2"},"id":"38a119a0-9ad8-5686-bf74-b55ba2a57e6e","frontmatter":{"title":"From 1.x to 2.0","localeCode":"en-US","icon":"doc-updateV2","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}