Search code examples
reactjsformsdropdownsemantic-uisemantic-ui-react

How to use semantic-ui-react dropdown

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>
Solution

  • 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'