如何使用 semantic-ui-react 下拉菜单
How to use semantic-ui-react dropdown
我正在尝试使用 semantic-ui-react 与 typescript 来创建表单。所以我正在使用文档。但是,当我实现下拉菜单或表单时,我得到了一个没有 CSS 的基本 HTML 表单。我应该怎么做才能获得与 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>
您需要使用 npm 安装默认主题 npm i semantic-ui-css
然后将该主题导入您的 app.ts
或 index.ts
import 'semantic-ui-css/semantic.min.css'
类似于 Fayeed 的上述回答。您可以在 index.html
的 header 标签中导入 CSS CDN
例如:
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
我正在尝试使用 semantic-ui-react 与 typescript 来创建表单。所以我正在使用文档。但是,当我实现下拉菜单或表单时,我得到了一个没有 CSS 的基本 HTML 表单。我应该怎么做才能获得与 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>
您需要使用 npm 安装默认主题 npm i semantic-ui-css
然后将该主题导入您的 app.ts
或 index.ts
import 'semantic-ui-css/semantic.min.css'
类似于 Fayeed 的上述回答。您可以在 index.html
例如:
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />