Semantic-ui-react style not loaded

Question

I am trying to learn react with semantic ui but I have a problem with the style from semantic ui. Then I try follow the docs from https://react.semantic-ui.com/ but the style is not loaded

Here's my code

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>
      );
    }
  }
}

Here's the result

I am not using webpack

That's tough! A page without styles is discouraging. However, please read [ask]. As it stands, this question does not provide a [mcve]. — Rafael, Jan 08 '19 at 06:46
@Rafael, i disagree with your judgement here. People familiar with Semantic don't need that example. it's much harder to spin up an environment like that and really not necessary. — JGallardo, Oct 28 '19 at 21:36

score 23 · Accepted Answer · edited Oct 28 '19 at 21:46

23

Seems like a package possibly was not installed. Try these steps below:

Adding the packages with NPM

1a. npm install semantic-ui-react

2a. npm install semantic-ui-css

Adding the packages with Yarn

1b. yarn add semantic-ui-react

2b. yarn add semantic-ui-css

Project setup

In your index.js file add

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

Running your project

Now you should be ready! Run your app and you should see the styles, you may have to clear cache in some cases.

Semantic-ui-react style not loaded

2 Answers2

Adding the packages with NPM

Adding the packages with Yarn

Project setup

Running your project

Further Reading