react semantic ui Header menu

Question

I am using semantic-ui-react for creating a Header. I use Menu item for that and here is my code :

 export default class Header extends Component {
  render() {
    return (
      <Menu stackable>
        <Menu.Item name="search">
          <Search />
        </Menu.Item>

        <Menu.Item name="username">
          <User username="user" />
        </Menu.Item>

        <Menu.Item name="bell">
          <Bell />
        </Menu.Item>
        <Menu.Menu position="right">
          <Menu.Item name="search">
            <img src={logo} />
          </Menu.Item>
        </Menu.Menu>
      </Menu>
    );
  }
}

and in App container:

return (
    <Container fluid > 
       <Header />
    </Container>

but the what i see and render on page is like a list and and haven't any style and even not looklike on doc page example: Doc's is there any thing i missed ?

score 0 · Accepted Answer · answered Oct 24 '17 at 08:08

From the docs:

Installing Semantic UI React provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components

You can do:

$ npm install semantic-ui-css --save

After install, include in your JS file:

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

react semantic ui Header menu

1 Answers1