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

Question

我想开发一个使用 react.js 和语义 ui 的 Web 客户端。有一个节点包使用 semantic-ui with react.js; semantic ui react. I have already installed this package on my computer following the instructions on 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 react 包。

对于 npm 用户：

npm install semantic-ui-react

纱线用户：

yarn add semantic-ui-react

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

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

就这些了。

Answer 4

对于 npm 用户：

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

Answer 5

semantic-ui-css is a package dependency of Semantic-ui-react (SUIR) and is the css only distribution with a unique theme. Semantic-ui 是在 Less 中编写的，并提供了对最终样式表（dist/semantic.min.css). 它提供了几个易于推导出来创建您自己的主题，以及关于如何使用 less.[=18 保持庞大而复杂的 css 井井有条且不具有侵入性的正确描述=]

在node v12中，sui-css安装可能会失败，抱怨ReferenceError: primordials is not defined。看 .

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

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

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

How to install and use semantic-ui-react

node.js

reactjs

semantic-ui