示例窗口未打开的模态窗口语义UI反应

Question

我从example获得了模态代码：

import React from 'react'
import { Button, Header, Icon, Modal } from 'semantic-ui-react'

const ModalBasicExample = () => (
    <Modal trigger={<Button>Basic Modal</Button>} basic size='small'>
        <Header icon='archive' content='Archive Old Messages' />
        <Modal.Content>
            <p>
                Your inbox is getting full, would you like us to enable automatic archiving of old messages?
            </p>
        </Modal.Content>
        <Modal.Actions>
            <Button basic color='red' inverted>
                <Icon name='remove' /> No
            </Button>
            <Button color='green' inverted>
                <Icon name='checkmark' /> Yes
            </Button>
        </Modal.Actions>
    </Modal>
)

export default ModalBasicExample

并作为组件添加到我的App.js：

import React from 'react'
...
import ModalBasicExample from "./Modal";

export default class App extends React.Component {

    ...

    render() {
        
        return (
            <React.Fragment>
                ...
                <ModalBasicExample/>
            </React.Fragment>
        )
    }
}

现在我看到一个按钮，但是当我单击它时，模态框不会打开：

Dependencies:
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "semantic-ui-react": "^0.85.0",

我将不胜感激。

Answer 1

您还需要导入相关的样式表信息：

1. 通过程序包管理器添加“ semantic-ui-css”依赖项（例如yarn / npm）：

yarn add semantic-ui-css

1. 将其导入您的App.js：

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

就是这样： https://codesandbox.io/s/l4k5428rjl