CODEWITHSUNDEEP
javascriptreactjssemantic-ui-react
tooquick
tooquick

Reputation: 25

Why isn't my Dropdown styled in React Semantic UI?

I am learning React and I'm about a week into it. I want to build a dropdown and to learn React Semantic UI I thought I could begin by copying the code from their website here. I can't get it to look right even when copying the code as directly as possible. Can someone explain what the difference is that is making mine look wrong?

My code: 

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

var options = [
    {
      text: 'Jenny Hess',
      value: 'Jenny Hess',
    },
    {
      text: 'ME',
          value: 'ME',
    }
]

const Reorder = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={options} />
)

export default Reorder

Code example from the documentation: 

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

import { friendOptions } from '../common'
  // friendOptions = [
  //   {
  //     text: 'Jenny Hess',
  //     value: 'Jenny Hess',
  //     image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
  //   },
//  ...
// ]


const DropdownExampleSelection = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} />
)

export default DropdownExampleSelection

Upvotes: 1

Views: 2858

Answers (1)

Andrew Li
Andrew Li

Reputation: 57982

It's probably because you didn't install the corresponding CSS package. Per the Usage page of the documentation:

Semantic UI CSS can be installed as a package in your project using NPM. You won't be able to use custom themes with this method.

$ npm install semantic-ui-css --save

After install, you'll need to include the minified CSS file in your index.js file:

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

The CSS lives in a separate package, the JavaScript and React components like in the main package. You have to install and import the CSS package and files to have it apply the CSS to your components.

Upvotes: 8

Related Questions