Reputation: 195

Semantic-ui-react style not loaded

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

Upvotes: 9

Answers (3)

Jay Lim

Reputation: 420

In my case, 'Get Started' in semantic-ui-react docs not working.

So I found workaround. (I'm using coreui-react-admin-pro)

Solution

My directory structure looks like below.
Put semantic.min.css in the public directory.


my-app/
├─ node_modules/
├─ public/
│  ├─ index.html
│  ├─ semantic.min.css
│  ├─ robots.txt
├─ src/
│  ├─ App.js
│  ├─ index.js
├─ .gitignore
├─ package.json
├─ README.md

And edit public/index.html

<html lang="en">
  <head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/semantic.min.css" />
    <!-- ... -->
  </head>
  <body>
    <h1>Please note link in head tag</h1>
    <!-- ... -->
  </body>
 </html>

Upvotes: 0

Rolando Niubó

Reputation: 1215

If you installed the semantic-ui-css package and continue to has this problem, maybe you forgot to import it in the index.js file of your react project.


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

Upvotes: 0

SakoBu

Reputation: 4011

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.