入门

安装

Semantic UI React 提供 React 组件,而 Semantic UI 提供主题作为 CSS 样式表。安装 React 组件并选择适合您需求的主题。

选项 1:包管理器

React 组件可以通过 `yarn` 或 `npm` 安装

安装后,**在您的应用程序入口文件中导入最小化的 CSS 文件:**

来自 Semantic UI >=2.3.x 的主题需要 Semantic UI React >=0.81.0。

Semantic UI CSS 包 会自动与主 Semantic UI 存储库同步,以提供 Semantic UI 的轻量级 CSS 版本。

如果您使用的是 TypeScript,则无需安装任何内容,类型定义包含在包中。

选项 2:CDN(没有捆绑器)

这是最快的入门方式,但是我们仍然建议使用 Create React AppNext.js 或其他预先配置的工具。

按照 React 的指南准备您的环境:一分钟内添加 React。然后只需将此链接和脚本标签添加到您的 `index.html` 文件中的 `<body>` 中,并在您的应用程序中初始化 React。

自定义主题

我们 主题指南 中提供了关于 Semantic UI 主题的详细文档。

支持的捆绑选项

Semantic UI React 完全支持所有现代 JavaScript 捆绑器。

Create React App

Semantic UI React 与 `create-react-app` 完全兼容,并且开箱即用。自定义主题的设置在 主题指南 中介绍。

Webpack 4/5

Semantic UI React 完全支持 Webpack 4/5。请确保在发布之前以 生产模式 构建您的应用程序。Semantic UI React 在生产模式下包含一些优化,例如从构建中删除 `propTypes`。

示例

有关如何导入和使用 Semantic UI React 组件的示例,请单击任何示例旁边的代码图标()。以下是一些直接链接

由以下公司提供闪电般的部署: Vercel.