如何使 React Semantic UI Modal 能够在整个屏幕上伸展？答案

【问题标题】：How to enable the React Semantic UI Modal to stretch across the full screen?如何使 React Semantic UI Modal 能够在整个屏幕上伸展？
【发布时间】：2018-02-11 11:10:36
【问题描述】：

这是我第一次尝试将 Meteor 与 ReactJs 和 React Semantic UI 一起使用，但在渲染 Semantic UI 模式时遇到了问题。我想要实现的是单击按钮并打开整个浏览器上的模态覆盖，参考React Semantic Modal Manual 但我现在所拥有的是模态部分呈现在屏幕上，如从随附的屏幕截图。有人可以帮忙吗？提前致谢。

Main.js

import {Meteor} from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from "../imports/routes/routes";

Meteor.startup(() => {
    ReactDOM.render(routes, document.getElementById('app'));
});

网站.js：

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

import PrivateHeader from './PrivateHeader';
import Sidebar from './Sidebar';
import ModalExample from './Modal';

export class Site extends React.Component {
render() {
        return (
            <div>
                <PrivateHeader/>
                <Sidebar/>
                <div className="page">
                    <div className="ui padded one column grid">
                        <div className="column">
                            <ModalExample/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default Site;

ModalExample.js

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

const ModalBasicExample = () => (
    <Modal trigger={<Button>Basic Modal</Button>} basic size='fullscreen'>
        <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

Sidebar.js

export const Sidebar = (props) => {
    return (
        <div className="ui inverted vertical left fixed menu" >
            <a className="item" href="/">
                <img src='/images/logo.png' className="ui mini right spaced image"/>
                Semantics UI Test
            </a>

            <div className="item">
                <div className="header">Hosting</div>
                <div className="menu">
                    <a className="item">Shared</a>
                    <a className="item">Dedicated</a>
                </div>
            </div>
            <div className="item">
                <div className="header">Support</div>
                <div className="menu">
                    <a className="item">E-mail Support</a>
                    <a className="item">FAQs</a>
                </div>
            </div>
        </div>
    )
};
export default Sidebar;

【问题讨论】：

标签： reactjs meteor semantic-ui semantic-ui-react

【解决方案1】：

我建议在触发按钮上使用onClick 事件运行this.show('fullscreen')，如下所示：

<Button onClick={this.show('fullscreen')}>Show Modal</Button>

ModalExample.js

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

class ModalExample extends Component {
  state = { open: false }

  show = size => () => this.setState({ size, open: true })
  close = () => this.setState({ open: false })

  render() {
    const { open, size } = this.state

    return (
      <div>
        <Button onClick={this.show('fullscreen')}>Show Modal</Button> // Triggering button

        <Modal size={size} open={open} onClose={this.close}>
          <Modal.Header>
            Delete Your Account
          </Modal.Header>
          <Modal.Content>
            <p>Are you sure you want to delete your account</p>
          </Modal.Content>
          <Modal.Actions>
            <Button negative>
              No
            </Button>
            <Button positive icon='checkmark' labelPosition='right' content='Yes' />
          </Modal.Actions>
        </Modal>
      </div>
    )
  }
}

export default ModalExample

Source

【讨论】：

试过了，但这对我的情况不起作用。它只是更改了模态显示，但模态仍然像上面的附加屏幕一样显示。覆盖模式仍然没有覆盖整个屏幕。
尝试将className="fullscreen modal" 添加到您的模式中。
感谢您的回复和帮助。我终于发现这是由于渲染模态时的className冲突。

【解决方案2】：

感谢 Saad 提到 className 的评论，我发现这是由于语义 UI 在打开模式时会添加 ui page modals dimmer transition visible active className。这会导致与我现有的page className 发生冲突，该类名称在其他页面中使用，但由于 Meteor 和 React，各种 scss 被压缩在一起。

【讨论】：