9

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

1

2 Answers 2

34

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>
Sign up to request clarification or add additional context in comments.

2 Comments

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 )
exactly what i was looking for. use 'npm install semantic-ui-css' to resolve module not found errors
14

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.