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

Question

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:

Brynhild

Duplicate, #44610211 – Snowinsummer

Answer 1

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>

Steamer

Where do you import 'semantic-ui-css/semantic.min.css'; ? I've tried to do it in the .jsx file and also the application.js file ( using webpacker to use React on Rails ) – Cusped

exactly what i was looking for. use 'npm install semantic-ui-css' to resolve module not found errors – Elle

Answer 2

Make sure that you

npm install --save semantic-ui-react

AND

npm install --save semantic-ui-css

in your terminal (in the directory of the project)

The second dependancy will allow you to apply styles. Just put

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

as well in the components you are working on.

Palinode