Модальное окно semantic-ui-реакции от примера не открывается

Question

Я получил модальный код из примера :

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

Импортируйте его в свой App.js:

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

Вот и все: https://codesandbox.io/s/l4k5428rjl