{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/start/getting-started","result":{"data":{"current":{"frontmatter":{"title":"Getting Started 快速开始","order":2,"brief":null,"icon":"doc-gettingstarted"},"fields":{"type":"start"},"tableOfContents":{"items":[{"url":"#1安装-semi","title":"1、安装 Semi"},{"url":"#2使用组件","title":"2、使用组件"},{"url":"#3在-nextjs-中使用","title":"3、在 NextJs 中使用"},{"url":"#4在-remix-中使用","title":"4、在 Remix 中使用"},{"url":"#5umd-方式使用组件","title":"5、UMD 方式使用组件"}]},"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\": \"Getting Started 快速开始\",\n  \"subTitle\": \"快速开始\",\n  \"localeCode\": \"zh-CN\",\n  \"icon\": \"doc-gettingstarted\",\n  \"order\": 2\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\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(\"p\", null, \"Semi Design \\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u8D1F\\u8D23\\u7EF4\\u62A4\\uFF0C\\u63D0\\u4F9B React \\u7248\\u672C\\u5F00\\u7BB1\\u5373\\u7528\\u768470+ \\u7EC4\\u4EF6\\u3001 Figam Variant UI Kit\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F60\\u53EF\\u5728\\u4EFB\\u610F React \\u9879\\u76EE\\u4E2D\\u5F15\\u5165\\u4F7F\\u7528 \\uFF08\\u65B0\\u9879\\u76EE\\u66F4\\u63A8\\u8350\\u901A\\u8FC7 Rsbuild\\u3001CreateReactApp\\u3001Vite \\u65B0\\u5EFA\\uFF09\\uFF0C\\u5F53\\u524D\\u652F\\u6301\\u642D\\u914D React v16\\u3001v17\\u3001v18 \\u3001v19\\uFF08\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/start/react19\"\n  }, \"React v19 \\u9002\\u914D\"), \"\\uFF09\\u7248\\u672C\\u4F7F\\u7528  \"), mdx(\"p\", null, \"\\u82E5\\u4F60\\u9700\\u8981\\u4F7F\\u7528 prefixCls\\u3001\\u4E3B\\u9898\\u3001CSS Layer\\u7B49\\u7F16\\u8BD1\\u65F6\\u5B9A\\u5236\\u80FD\\u529B\\u7684\\u573A\\u666F\\uFF0C\\u6211\\u4EEC\\u66F4\\u63A8\\u8350\\u4F7F\\u7528 Webpack \\u6216 Rspack/Rsbuild \\u4F5C\\u4E3A\\u5DE5\\u7A0B\\u5316\\u6784\\u5EFA\\u65B9\\u6848\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\uFF08\\u5B57\\u8282\\u8DF3\\u52A8\\u7528\\u6237\\uFF0C\\u82E5\\u4F7F\\u7528\\u7684\\u662F\\u516C\\u53F8\\u5185\\u90E8\\u76F8\\u5173\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848\\uFF0C\\u914D\\u7F6E\\u8BF7\\u67E5\\u9605\\u98DE\\u4E66\\u6587\\u6863\\uFF1A\", mdx(\"a\", {\n    href: \"https://bytedance.larkoffice.com/wiki/FaRwweDLmigrD0k8wLgcDaQtnbb\",\n    target: \"_blank\"\n  }, \"Semi\\u5DE5\\u7A0B\\u5316 FAQ\"), \"\\uFF09\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, \"\\u7EC4\\u4EF6\\u5305 @douyinfe/semi-ui \\u9002\\u7528\\u4E8E React \\u7248\\u672C\\u4F4E\\u4E8E v19 \\u7684\\u60C5\\u51B5\\uFF0C\\u5982\\u679C\\u4F7F\\u7528 React v19\\uFF0C\\u8BF7\\u4F7F\\u7528 @douyinfe/semi-ui-19\\uFF0C\\u4E0B\\u6587\\u4E2D\\u6240\\u6709\\u793A\\u4F8B\\u4E2D\\u7684 @douyinfe/semi-ui \\u5747\\u53EF\\u66FF\\u6362\\u4E3A @douyinfe/semi-ui-19\\u3002\"), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"1\\u3001\\u5B89\\u88C5 Semi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4EE5\\u4E0B\\u5C55\\u793A\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@douyinfe/semi-ui\"), \" \\u7684\\u5B89\\u88C5\\u548C\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"# \\u4F7F\\u7528 npm\\nnpm i @douyinfe/semi-ui\\n\\n# \\u4F7F\\u7528 yarn\\nyarn add @douyinfe/semi-ui\\n\\n# \\u4F7F\\u7528 pnpm\\npnpm add @douyinfe/semi-ui\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"2\\u3001\\u4F7F\\u7528\\u7EC4\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728 Webpack\\u3001Rspack\\u3001create-react-app \\u6216 Vite \\u9879\\u76EE\\u4E2D\\u4F7F\\u7528\\u65F6\\uFF0C\\u65E0\\u9700\\u8FDB\\u884C\\u4EFB\\u4F55\\u7F16\\u8BD1\\u9879\\u914D\\u7F6E\\uFF0C\\u76F4\\u63A5\\u4F7F\\u7528\\u5373\\u53EF\\u3002\\u6784\\u5EFA\\u65F6\\u6240\\u6709\\u76F8\\u5173\\u8D44\\u6E90\\u5747\\u4F1A\\u6309\\u9700\\u6253\\u5305    \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React, { Component } from 'react';\\n// \\u5982\\u679C\\u4E3A React v19\\uFF0C\\u9700\\u8981\\u4ECE @douyinfe/semi-ui-19 \\u4E2D\\u5BFC\\u51FA\\u7EC4\\u4EF6\\nimport { Button, Toast } from '@douyinfe/semi-ui';\\n\\nconst SemiApp = () => {\\n    return (\\n        <Button onClick={() => Toast.warning({ content: 'welcome' })}>Hello Semi</Button>\\n    );\\n};\\n\")), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u63A8\\u8350\\u5728\\u9879\\u76EE\\u4E2D\\u5F15\\u5165 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.npmjs.com/package/reset-css\"\n  }, \"reset.css\"), \"\\uFF0C\\u5B83\\u53EF\\u4EE5\\u91CD\\u7F6E\\u6D4F\\u89C8\\u5668\\u81EA\\u5E26\\u7684\\u9ED8\\u8BA4\\u6837\\u5F0F\\uFF0C\\u907F\\u514D\\u4E0D\\u540CUA\\u4E4B\\u95F4\\u7684\\u6837\\u5F0F\\u5DEE\\u5F02\\u3002\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"3\\u3001\\u5728 NextJs \\u4E2D\\u4F7F\\u7528\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u4EC5\\u4F7F\\u7528\\u9ED8\\u8BA4\\u4E3B\\u9898, \\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transpilePackages\"), \" \\u8FFD\\u52A0 Semi \\u76F8\\u5173\\u7684 package\\u5373\\u53EF \\uFF08Next.js \\u7248\\u672C\\u8981\\u6C42 >= v13.1 \\uFF09\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, \"// next.config.js\\nconst nextConfig = {\\n+ transpilePackages: ['@douyinfe/semi-ui', '@douyinfe/semi-icons', '@douyinfe/semi-illustrations'],\\n};\\n\\nmodule.exports = nextConfig;\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u9700\\u8981\\u4F7F\\u7528\\u5B9A\\u5236\\u4E3B\\u9898\\u5305\\u6216 Next.js\\u7248\\u672C\\u4F4E\\u4E8E v13.1\\uFF0C\\u5219\\u9700\\u8981\\u914D\\u5408 Semi \\u63D0\\u4F9B\\u7684\\u7F16\\u8BD1\\u63D2\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@douyinfe/semi-next\"), \" \\u63D2\\u4EF6\\u4F7F\\u7528 \", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9996\\u5148\\u5B89\\u88C5\\u63D2\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"npm i @douyinfe/semi-next\"), \" (\\u5982\\u679C\\u4F60\\u4F7F\\u7528 yarn \\u6216 pnpm\\uFF0C\\u8BF7\\u81EA\\u884C\\u66F4\\u6362\\u4E3A\\u5BF9\\u7B49\\u547D\\u4EE4)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728 next.config.js \\u4E2D\\u8FDB\\u884C\\u914D\\u7F6E\\uFF0C\\u63D2\\u4EF6\\u4F1A\\u5C06\\u7EC4\\u4EF6\\u9ED8\\u8BA4\\u7684import CSS \\u8BED\\u53E5\\u79FB\\u9664\\u3002\\u66F4\\u591A\\u914D\\u7F6E\\u53EF\\u67E5\\u9605 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@douyinfe/semi-next\"), mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.npmjs.com/package/@douyinfe/semi-next\"\n  }, \"\\u8BE6\\u7EC6\\u6587\\u6863\"), \" \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"global.css\"), \" \\u4E2D\\u5F15\\u5165\\u5168\\u91CF\\u7684 semi css\\uFF08\\u76EE\\u524D\\u5728 Next.js \\u4E2D\\u4E0D\\u652F\\u6301\\u6309\\u9700\\u5F15\\u5165\\uFF09\")))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// next.config.js\\nconst semi = require('@douyinfe/semi-next').default({\\n    /* the extension options */\\n});\\nmodule.exports = semi({\\n    // your custom Next.js configuration\\n});\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"/* styles/globals.css */\\n@import '~@douyinfe/semi-ui/dist/css/semi.min.css';\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5982\\u4F55\\u5728 Next.js \\u4E2D\\u4F7F\\u7528\\u4E3B\\u9898\\u5305\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F60\\u9700\\u8981\\u66F4\\u6362 globals.css \\u4E2D import \\u8BED\\u53E5\\u7684\\u8DEF\\u5F84\\uFF0C\\u5C06\\u9ED8\\u8BA4\\u4E3B\\u9898 CSS \\u4EA7\\u7269\\u66F4\\u6362\\u4E3A\\u4F60\\u5B9A\\u5236\\u7684\\u4E3B\\u9898\\u5305\\u4E2D\\u7684 CSS \\u4EA7\\u7269\\uFF0C\\u4F8B\\u5982\\u5F53\\u5E0C\\u671B\\u5E94\\u7528\\u6296\\u97F3\\u521B\\u4F5C\\u670D\\u52A1\\u5E73\\u53F0\\u7684\\u4E3B\\u9898\\u5305 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@semi-bot/semi-theme-doucreator\"), \" \\u65F6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"/* styles/globals.css */\\n@import '~@semi-bot/semi-theme-doucreator/semi.min.css';\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"4\\u3001\\u5728 Remix \\u4E2D\\u4F7F\\u7528\"), mdx(Notice, {\n    mdxType: \"Notice\"\n  }, \"\\u6CE8\\u610F\\uFF1A\\u4EE5\\u4E0B\\u914D\\u7F6E\\u9002\\u7528\\u4E8E Remix v1\\u3002Remix v2\\u6709\\u591A\\u79CD\\u6784\\u5EFA\\u6A21\\u5F0F\\uFF0CSemi \\u672A\\u8FDB\\u884C\\u8FC7\\u5B8C\\u6574\\u9002\\u914D\\u6027\\u6D4B\\u8BD5\\uFF0C\\u5EFA\\u8BAE\\u4F18\\u5148\\u53C2\\u8003 \", mdx(\"a\", {\n    href: \"https://github.com/DouyinFE/semi-design/issues/2444\",\n    target: \"_blank\"\n  }, \"Issue 2444\"), \" \\u5904\\u7406\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"@remix\\u76F8\\u5173\\u5305\\u7248\\u672C\\u8981\\u6C42 > 1.11.0\\uFF0C\\u5E76\\u5B89\\u88C5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@remix-run/css-bundle\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"remix.config.js\"), \"\\uFF0C\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://remix.run/docs/en/v1/guides/styling#css-side-effect-imports\"\n  }, \"Remix Css Side-Effect Imports\"), \"\\u3002\\u6253\\u5F00 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"unstable_cssSideEffectImports\"), \" \\u5F00\\u5173\\uFF0C\\u5E76\\u5C06 Semi \\u76F8\\u5173\\u5305\\u914D\\u7F6E\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"serverDependenciesToBundle\"), \" \\u4E2D\\u3002\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, \"// remix.config.js\\nmodule.exports = {\\n  future: {\\n+    unstable_cssSideEffectImports: true,\\n  },\\n  serverDependenciesToBundle: [\\n+    /^@douyinfe\\\\/semi-ui/,\\n+    /^@douyinfe\\\\/semi-icons/,\\n+    /^@douyinfe\\\\/semi-illustrations/,\\n  ],\\n};\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"root.tsx\"), \" \\u4E2D\\u8FDB\\u884C\\u914D\\u7F6E\\uFF0C\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://remix.run/docs/en/v1/guides/styling#css-bundling\"\n  }, \"Remix CSS Bundling\"), \"\\u3002\\u5F15\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"cssBundleHref\"), \"\\uFF0C\\u5E76\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"links\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, \"// root.tsx\\n+ import { cssBundleHref } from \\\"@remix-run/css-bundle\\\";\\n\\n export const links = () => {\\n   return [\\n+     ...(cssBundleHref ? [{ rel: \\\"stylesheet\\\", href: cssBundleHref }] : []),\\n   ];\\n };\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5B8C\\u6210\\u914D\\u7F6E\\uFF0C\\u53EF\\u4EE5\\u6B63\\u5E38\\u4F7F\\u7528 Semi \\u76F8\\u5173\\u7EC4\\u4EF6 \")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5982\\u4F55\\u5728 Remix \\u4E2D\\u4F7F\\u7528\\u4E3B\\u9898\\u5305\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u53EF\\u4EE5\\u76F4\\u63A5\\u5C06 cssBundleHref \\u8FD9\\u4E00\\u6B65\\u66FF\\u6362\\u4E3A\\u5F15\\u5165\\u4E3B\\u9898\\u5305\\u4E2D\\u5DF2\\u6784\\u5EFA\\u597D\\u7684\\u5168\\u91CFcss \\u4EA7\\u7269\\uFF0C\\u4EE3\\u66FF\\u9ED8\\u8BA4\\u4E3B\\u9898css\\uFF09\\uFF0C\\u4F8B\\u5982\\u5F53\\u5E0C\\u671B\\u5E94\\u7528\\u6296\\u97F3\\u521B\\u4F5C\\u670D\\u52A1\\u5E73\\u53F0\\u7684\\u4E3B\\u9898\\u5305 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@semi-bot/semi-theme-doucreator\"), \" \\u65F6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, \"// root.tsx\\n+ import ThemeStyle from \\\"@semi-bot/semi-theme-doucreator/semi.min.css\\\";\\n\\n export const links = () => {\\n   return [\\n-    ...(cssBundleHref ? [{ rel: \\\"stylesheet\\\", href: cssBundleHref }] : []),     \\n+    { rel: \\\"stylesheet\\\", href: ThemeStyle },\\n   ];\\n };\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"5\\u3001UMD \\u65B9\\u5F0F\\u4F7F\\u7528\\u7EC4\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://unpkg.com/browse/@douyinfe/semi-ui/dist/umd/semi-ui.min.js\"\n  }, mdx(\"img\", {\n    parentName: \"a\",\n    \"src\": \"https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/umd/semi-ui.min.js?label=semi.min.js&compression=gzip\",\n    \"alt\": \"BUILD-JS\"\n  })), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css\"\n  }, mdx(\"img\", {\n    parentName: \"a\",\n    \"src\": \"https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip\",\n    \"alt\": \"BUILD-CSS\"\n  }))), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6211\\u4EEC\\u5E76\\u4E0D\\u63A8\\u8350\\u76F4\\u63A5\\u4F7F\\u7528\\u5DF2\\u6784\\u5EFA\\u6587\\u4EF6\\uFF0C\\u8FD9\\u6837\\u4F1A\\u5168\\u91CF\\u5F15\\u5165\\u6240\\u6709\\u7EC4\\u4EF6\\uFF0C\\u65E0\\u6CD5\\u5B9E\\u73B0\\u6309\\u9700\\u52A0\\u8F7D\\u3002\\u4F46\\u5982\\u679C\\u786E\\u5B9E\\u6709\\u975E\\u6784\\u5EFA\\u573A\\u666F\\u7684\\u9700\\u6C42\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u4EE5\\u4E0B\\u65B9\\u5F0F\\u5F15\\u7528\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u4F7F\\u7528 script \\u548C link \\u6807\\u7B7E\\u76F4\\u63A5\\u5F15\\u5165\\u6587\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528\\u5168\\u5C40\\u53D8\\u91CF \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"SemiUI\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"SemiIcons\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"SemiIllustrations\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"1\\u3001 \\u8BF7\\u786E\\u4FDD\\u4F60\\u5DF2\\u63D0\\u524D\\u5F15\\u5165 react \\u4EE5\\u53CA react-dom\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"2\\u3001 \\u5F15\\u5165 JS \\u6587\\u4EF6\\uFF0C\\u4EE5\\u4E0B\\u793A\\u4F8B URL \\u4E2D 2.27.0 \\u4E3A version \\u6807\\u8BC6\\uFF0C\\u5E0C\\u671B\\u4F7F\\u7528\\u4E0D\\u540C\\u7248\\u672C Semi \\u65F6\\uFF0C\\u5C06 version \\u4E2D\\u5BF9\\u5E94\\u7684\\u503C\\u66FF\\u6362\\u5373\\u53EF  \"), 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  }, \"\\u8D44\\u6E90\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"URL\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi-ui (min)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/umd/semi-ui.min.js\"\n  }, \"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/umd/semi-ui.min.js\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi-icons (min)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js\"\n  }, \"https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi-illustrations (min)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js\"\n  }, \"https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi-ui (normal)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/umd/semi-ui.js\"\n  }, \"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/umd/semi-ui.js\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi-icons (normal)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js\"\n  }, \"https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.js\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi-illustrations (normal)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js\"\n  }, \"https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.js\"))))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"3\\u3001 \\u5F15\\u5165 Semi \\u9ED8\\u8BA4\\u4E3B\\u9898\\u7684 CSS \\u6837\\u5F0F\\u6587\\u4EF6\"), 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  }, \"\\u8D44\\u6E90\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"URL\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi.css\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/css/semi.css\"\n  }, \"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/css/semi.css\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"semi-icons.css\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css\"\n  }, \"https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css\"))))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\"\n  }, \"<!DOCTYPE html>\\n    <html lang=\\\"zh-cn\\\">\\n    <head>\\n        <script src=\\\"https://unpkg.com/babel-standalone@6.15.0/babel.min.js\\\"></script>\\n+       <script crossorigin src=\\\"https://unpkg.com/react@16/umd/react.development.js\\\"></script>\\n+       <script crossorigin src=\\\"https://unpkg.com/react-dom@16/umd/react-dom.development.js\\\"></script>\\n\\n+       <script src=\\\"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/umd/semi-ui.min.js\\\"></script>\\n+       <link rel=\\\"stylesheet\\\" href=\\\"https://unpkg.com/@douyinfe/semi-ui@2.27.0/dist/css/semi.css\\\">\\n\\n+       <script src=\\\"https://unpkg.com/@douyinfe/semi-icons@latest/dist/umd/semi-icons.min.js\\\"></script>\\n+       <link rel=\\\"stylesheet\\\" href=\\\"https://unpkg.com/@douyinfe/semi-icons@latest/dist/css/semi-icons.css\\\">\\n+       <script src=\\\"https://unpkg.com/@douyinfe/semi-illustrations@latest/dist/umd/semi-illustrations.min.js\\\"></script>\\n\\n    </head>\\n    <body>\\n        <div id=\\\"root\\\"></div>\\n    </body>\\n</html>\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<script type=\\\"text/babel\\\">\\n    const { Input, Button, Toast, Icon, Form } = SemiUI;\\n    const { IconHome } = SemiIcons;\\n    const { IllustrationConstruction } = SemiIllustrations;\\n    ReactDOM.render(\\n        <div>\\n            <Button onClick={() => Toast.warning({ duration: 0, content: 'Semi Design' })}>test</Button>\\n            <Input defaultValue=\\\"semi\\\" onChange={value => Toast.info('hello semi')}></Input>\\n            <IconHome size=\\\"large\\\" />\\n            <IllustrationConstruction style={{ width: 150, height: 150 }} />\\n        </div>,\\n        document.getElementById('root')\\n    );\\n</script>\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/start/getting-started","next":{"fields":{"slug":"en-US/ecosystem/react19"},"id":"32b7869f-672c-5e7a-95a3-207d8a7110cb","frontmatter":{"title":"React 19 Adaptation","localeCode":"en-US","icon":"doc-configprovider","showNew":null}},"previous":{"fields":{"slug":"en-US/start/getting-started"},"id":"6c216ee8-583a-58cc-9df2-97beabb4fe04","frontmatter":{"title":"Quick Start","localeCode":"en-US","icon":"doc-gettingstarted","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}