时间戳

首页 > 解决方案 > 如何使用语义-ui-react 下拉菜单

reactjs - 如何使用语义-ui-react 下拉菜单

问题描述

我正在尝试使用 semantic-ui-react 和 typescript 来创建一个表单。所以我正在使用文档。但是，当我实现 dropdow 或表单时，我得到了一个没有 CSS 的基本 HTML 表单。我应该怎么做才能获得与 react.semantic-ui.com 相同的 UX

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>

标签： reactjsformsdropdownsemantic-uisemantic-ui-react

解决方案

您需要使用 npm 安装默认主题npm i semantic-ui-css

然后将该主题导入您的app.ts或index.ts

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

推荐阅读