未加载语义-ui-反应样式

Question

我正在尝试学习使用语义 ui 做出反应，但我对来自语义 ui 的样式有疑问。然后我尝试按照 https://react.semantic-ui.com/ 中的文档进行操作但样式未加载

这是我的代码

import React, { Component } from 'react';
import { Table, Icon, Menu, Label } from 'semantic-ui-react';

class App extends Component {

  // Here's my other code

  render() {
    const data = this.state.data
      if (this.state.error) {
        return (<p>Error : {this.state.error.message}</p>);
      } else if (!this.state.isloaded) {
        return (<p>Loading ...</p>);
      } else {
        return (
          <Table celled>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Network</Table.HeaderCell>
                <Table.HeaderCell>Address</Table.HeaderCell>
                <Table.HeaderCell>Balance</Table.HeaderCell>
              </Table.Row>
            </Table.Header>

            <Table.Body>
              <Table.Row>
                <Table.Cell>
                  <Label ribbon>{data.network}</Label>
                </Table.Cell>
                <Table.Cell>{data.address}</Table.Cell>
                <Table.Cell>{data.confirmed}</Table.Cell>
              </Table.Row>
            </Table.Body>

            <Table.Footer>
              <Table.Row>
                <Table.HeaderCell colSpan='3'>
                  <Menu floated='right' pagination>
                  <Menu.Item as='a' icon>
                    <Icon name='chevron left' />
                  </Menu.Item>
                  <Menu.Item as='a'>1</Menu.Item>
                  <Menu.Item as='a'>2</Menu.Item>
                  <Menu.Item as='a'>3</Menu.Item>
                  <Menu.Item as='a'>4</Menu.Item>
                  <Menu.Item as='a' icon>
                    <Icon name='chevron right' />
                  </Menu.Item>
                </Menu>
              </Table.HeaderCell>
            </Table.Row>
          </Table.Footer>
        </Table>
      );
    }
  }
}

这是结果

我没有使用 webpack

Answer 1

似乎有一个包可能没有安装。请尝试以下步骤：

使用 NPM 添加包

1a。 npm install semantic-ui-react

2a。 npm install semantic-ui-css

用 Yarn 添加包

1b。 yarn add semantic-ui-react

2b。 yarn add semantic-ui-css

项目设置

在您的 index.js 文件中添加

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

运行宁你的项目

现在你应该准备好了！运行您的应用和您应该会看到样式，在某些情况下您可能需要清除缓存。

进一步阅读

https://react.semantic-ui.com/usage/

Answer 2

如果你安装了 semantic-ui-css 包后仍然出现这个问题，可能是你忘记在你的 react 项目的 index.js 文件中导入它了。


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

Answer 3

就我而言，semantic-ui-react docs 中的 'Get Started' 不起作用。

所以我找到了解决方法。（我正在使用 coreui-react-admin-pro）

解决方案

我的目录结构如下所示。
将semantic.min.css放入public目录。


my-app/
├─ node_modules/
├─ public/
│  ├─ index.html
│  ├─ semantic.min.css
│  ├─ robots.txt
├─ src/
│  ├─ App.js
│  ├─ index.js
├─ .gitignore
├─ package.json
├─ README.md

并编辑 public/index.html

<html lang="en">
  <head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/semantic.min.css" />
    <!-- ... -->
  </head>
  <body>
    <h1>Please note link in head tag</h1>
    <!-- ... -->
  </body>
 </html>

未加载语义-ui-反应样式

Semantic-ui-react style not loaded

reactjs

semantic-ui

semantic-ui-react