如何啓用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