如何启用React语义UI模式以在整个屏幕上展开？

Question

这是我第一次尝试将Meteor与ReactJs和React语义UI结合使用，并在渲染语义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')); 
}); 

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; 

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; 

Answer 1

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

Answer 2

我建议用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