How to use semantic-ui-react dropdown

Question

I am trying to use semantic-ui-react with typescript to create a form . So I am using the documentation. However when I implement the dropdow or the form I am getting a basic HTML form without CSS. What should I do to get the same UX as react.semantic-ui.com

import { Dropdown } from 'semantic-ui-react'
const options = [
   { key: 1, text: 'Location 1', value: 1 },
   { key: 2, text: 'Location 2', value: 2 },
   { key: 3, text: 'Location 3', value: 3 },
 ]

return (

    <Form>

       <div>
       <Dropdown
       placeholder='Etat *'
       title="Select Etat"
       fluid
       selection
       options={StatusOptions}
       />
       </div> 

</Form>

fayeed · Accepted Answer · 2020-03-20 18:48:17Z

1

You need to install the default theme using npm npm i semantic-ui-css

And later import that theme in your app.ts or index.ts

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

answered Mar 20, 2020 at 18:48

fayeed

2,49519 silver badges23 bronze badges

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

Comments

DJ2 · Accepted Answer · 2020-03-20 19:52:46Z

0

Similar to the above answer by Fayeed. You can import the the CSS CDN in the header tag of index.html

For example:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />

answered Mar 20, 2020 at 19:52

DJ2

1,7613 gold badges37 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to use semantic-ui-react dropdown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related