React Semantic UI component not rendering properly

Question

I used create-react-app to initialize my app. Then I did npm install semantic-ui-react --save to install the package.

I want to create this Grid example from https://react.semantic-ui.com/collections/grid#grid-example-divided-number:

I created a file called Grid.js:

import React from 'react'
import { Grid } from 'semantic-ui-react'

const GridExample = () => (
  <Grid columns={3} divided>
    <Grid.Row>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
    </Grid.Row>

    <Grid.Row>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default GridExample

Then in App.js I imported GridExample:

import React, { Component } from 'react';
import GridExample from './Grid'
import logo from './logo.svg';
import './App.css';

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>

        <GridExample />

      </div>
    );
  }
}
export default App;

However, when the web page loads the <p> elements are stacked on top of each other - as if 6X1 instead of the intended 2X3

Why is the Grid not being rendered properly?

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

You are forgetting to add the CSS file.

According to the docs:

This is the quickest way to get started with Semantic UI React. You won't be able to use custom themes with this method.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>

See https://react.semantic-ui.com/usage#css for more options on how to reference it

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 26, 2017 at 0:17

enapupe

17.2k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Semantic UI component not rendering properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related