reactjs - Semantic-ui-react 样式未加载
问题描述
我正在尝试学习对语义 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
解决方案
好像一个包可能没有安装。请尝试以下步骤:
使用 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'
运行你的项目
现在你应该准备好了!运行您的应用程序,您应该会看到样式,在某些情况下您可能需要清除缓存。
延伸阅读
推荐阅读
- module - 在量角器中,如何使用模块的导入?
- windows - 有什么方法可以将板载系统哔声(又名 PC 扬声器)用作 Windows 音频设备?
- visual-studio - 发布项目时,AppCode 文件夹中的类未编译
- filter - 如何在 Data Studio 中一次插入一个选择的过滤器?
- python - 内存pycharm python
- r - 如何在不指定 y 值的情况下使用 ggplot() + geom_bar() 显示单个条形值
- excel - 限制对单个工作表的查看和编辑访问
- ios - 从 SwiftUI 视图呈现 UIActivityViewController
- ios - 如何使用 SwiftUI 创建自定义滑块?
- azure - 通过 Jenkins 部署 Azure Web 应用