[英]Change handler for semantic-ui-react checkbox does not work : React+Typescript
[英]Semantic-ui-react library does not work; no errors
semantic-ui-react
在我的浏览器上不起作用,我不知道为什么 - 控制台中没有任何错误或问题。
这是来自库semantic-ui
的组件; 它是来自这个文件UptimeGuarantee.js
import React from 'react'
import { Header, Icon , Image} from 'semantic-ui-react'
const HeaderExampleUsersIcon = () => (
<div>
<Header as='h2' icon textAlign='center'>
<Icon name='users' circular />
<Header.Content>
Friends
</Header.Content>
</Header>
<Image centered size='large' src='/assets/images/wireframe/centered-paragraph.png' />
</div>
)
export default HeaderExampleUsersIcon
在我的App.js上我称这个组件:
import React, { Component , PropTypes} from 'react';
import { Button } from 'semantic-ui-react';
import logo from './logo.svg';
import './App.css';
import HeaderExampleUsersIcon from './UptimeGuarantee'
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p>
<Button primary>Primary</Button>
<HeaderExampleUsersIcon />
</div>
);
}
}
export default App;
结果:
semantic-ui-react只是没有样式和字体的组件。
您应该从semantic-ui-css导入样式
import 'semantic-ui-css/semantic.min.css';
或者为html添加样式
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"></link>
请确保你
npm install --save semantic-ui-react
和
npm install --save semantic-ui-css
在您的终端(在项目目录中)
第二个依赖将允许您应用样式。 刚刚放
import 'semantic-ui-css/semantic.min.css';
以及您正在处理的组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.