Wie kann man das React Semantic UI Modal über den gesamten Bildschirm strecken?

Question

Dies ist das erste Mal, dass ich Meteor mit ReactJs und React Semantic UI benutze und Probleme beim Rendern der Semantic UI modal habe. Was ich versuche zu erreichen ist, klicken Sie auf die Schaltfläche und öffnen Sie die modale Überlagerung auf den gesamten Browser, in Bezug auf die React Semantic Modal Manual Aber was ich gerade habe, ist, dass das Modal teilweise auf dem Bildschirm wiedergegeben wird, wie aus dem beigefügten Screenshots. Kann mir bitte jemand helfen? Danke im Voraus.

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

Dank Saads Kommentar, der den className erwähnt, habe ich herausgefunden, dass es aufgrund der Semantic UI einen ui page modals dimmer transition visible active className gibt, wenn das Modal geöffnet wird. Dies führt zu einem Konflikt mit meinem bestehenden Klassennamen page, der in anderen Seiten verwendet wird, aber wegen Meteor und React werden die verschiedenen scss zusammen komprimiert.

Answer 2

schlage ich this.show('fullscreen') mit einem onClick Ereignis auf Trigger-Taste wie die folgende auszuführen:

<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