Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Semantic-ui-react library does not work; no errors

semantic-ui-react does not work on my browser and I'm not sure why - there aren't any errors or problems in the console.

This is the component from the library semantic-ui; it's from this file 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

and on my App.js I call this component:

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;

Result:

enter image description here

like image 356
MahmoudMH Avatar asked Aug 07 '17 19:08

MahmoudMH


People also ask

Is Semantic UI abandoned?

Semantic UI is not dead. There is a community that wants to keep it going. I think it would be helpful to create an RFC repo to discuss future direction of the project and the planning of the implementations of the decisions we make.

How does semantic UI Integrate With React?

Option 1: Package Managerx require Semantic UI React >=0.81. 0. The Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI. If you are using TypeScript, you don't need to install anything, typings are included with the package.

Can I use semantic UI in react native?

Semantic UI React only generates elements using react-dom . The only way to use it with React Native would be if the entire library was updated to render native elements for other target environments.


1 Answers

semantic-ui-react is only components without styles and fonts.

You should import styles from semantic-ui-css

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

or add styles to html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"></link>
like image 77
Alex Borodin Avatar answered Sep 18 '22 13:09

Alex Borodin