Reactjs 如何使React语义UI模式在整个屏幕上延伸？

这是我第一次尝试将Meteor与ReactJs和React语义UI一起使用，但在呈现语义UI模式时遇到问题。我试图实现的是单击按钮并打开整个浏览器上的模式覆盖，参考，但我现在看到的是，模式部分呈现在屏幕上，如所附的屏幕截图所示。有人能帮忙吗？提前谢谢

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

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'));
});

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

Site.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;

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

从“React”导入React；
从“语义ui反应”导入{标题、按钮、模式}；
从“/PrivateHeader”导入PrivateHeader；
从“./Sidebar”导入侧栏；
从“/Modal”导入ModalExample；
导出类站点扩展React.Component{
render（）{
返回(
);
}
}
导出默认站点；

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

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

从“React”导入React
从“语义ui反应”导入{按钮、标题、图标、模式}
const modalbasic示例=（）=>(
您的收件箱已满，是否希望我们启用旧邮件的自动存档

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

不
对
)
导出默认modalbasic示例

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;

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

export const边栏=（道具）=>{
返回(
群众或部队的集合
我建议运行
this.show（'fullscreen'）
，在触发按钮上单击
事件，如下所示：

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

显示模式

ModalExample.js

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

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

import React，{Component}来自“React”
从“语义ui反应”导入{按钮，模式}
类ModalExample扩展组件{
状态={open:false}
show=size=>（）=>this.setState（{size，open:true}）
close=（）=>this.setState（{open:false}）
render（）{
const{open，size}=this.state
返回(
显示模式//触发按钮
删除你的帐户
您确定要删除您的帐户吗

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

不
)
}
}
导出默认ModalExample

感谢Saad提到类名的评论，我发现这是由于语义用户界面在打开模式时会添加一个<代码>用户界面模态变暗器可见活动类名。这会导致与我在其他页面中使用的现有<代码>页面类名冲突，但由于Meteor和React各种SCS被压缩在一起。
尝试过，但在我的案例中不起作用。它只是更改了模式显示，但模式仍像上面附加的屏幕一样显示。叠加模式仍不能覆盖整个屏幕。尝试添加
className=“fullscreen modal”
致您的模态。感谢您的回复和帮助。我终于发现，这是由于呈现模态时类名冲突造成的。
<Button onClick={this.show('fullscreen')}>Show Modal</Button>