如何安装和使用semantic-ui-react

Question

我想使用 react.js 和语义 ui 构建一个 Web 客户端。有一个 node 包可以将语义 UI 与 react.js 一起使用； semantic ui react。我已经按照react.semantic-ui.com/usage 上的说明在我的计算机上安装了这个软件包，但是在使用一个简单的网页进行测试后。

我认为我遇到了这个问题，因为我没有使用最后一条指令： import '.../semantic/dist/semantic.min.css';。我的项目主文件夹中已经生成了semantic文件夹，但是还没有生成dist文件夹和semantic.min.css。我应该在哪里以及如何使用它？

注意：我还尝试将此<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> 添加到我的index.html 页面，并且页面的样式符合预期。我不想使用这个选项，因为我不能用它来改变它们。

Answer 1

首先 - 安装 css npm install semantic-ui-css --save
然后 - 在 index.js 页面（最顶层）导入
import 'semantic-ui-css/semantic.min.css';

Answer 2

npm install sematic-ui-react sematic-ui-css --save

• 可能在你的根文件中添加 src/index.js

  导入'semantic-ui-css/semantic.min.css';

• 一些常见的布局可以在这里找到：(https://semantic-ui.com/usage/layout.html)

Answer 3

首先，使用以下包管理器之一安装语义 UI 反应包。

对于 npm 用户：

npm install semantic-ui-react

对于纱线用户：

yarn add semantic-ui-react

然后将此导入行添加到您的index.js

import 'semantic-ui-css/semantic.min.css'

就是这样。

请看我的博文，里面有分步指南：
http://videotutorialspot.com/2019/01/08/semantic-ui-for-react-install-and-getting-started/

Answer 4

对于 npm 用户：

npm i semantic-ui-react semantic-ui-css

Answer 5

semantic-ui-css 是 Semantic-ui-react (SUIR) 的包依赖项，并且是具有独特主题的 css only 发行版。 Semantic-ui 是用 Less 编写的，对最终样式表 (dist/semantic.min.css) 的生成提供更大更精细的控制（每个组件）。 它提供了几个易于派生的主题以创建您自己的主题，并提供了一个关于如何保持一个庞大而复杂的 css 井井有条并且不使用 less 侵入性的正确图片。

在node v12中，sui-css的安装可能会失败， 抱怨ReferenceError: primordials is not defined。看 https://stackoverflow.com/a/58394828/1874016.

你也可以 git clone https://github.com/semantic-org/semantic-ui 在这里应用上面的补丁。 和yarn install

注意默认semantic.min.css 大小是628Kb，您可能不需要为它拥有的所有组件设置样式。