React Portals

ReactDom.createPortal(
        
           <div style={Object.assign({}, styleObj, obj)}><p>{context.background}</p> {props.children}</div >
           
        
    , document.body)

import React from 'react';
import ReactDom from 'react-dom';
import ThemeContext from './context';
const styleObj = {
    position: 'absolute',
    width: '200px',
    height: '200px',
    marginTop: '-100px',
    marginLeft: '-100px',
    top: '50%',
    left: '50%',
    backgroundColor: 'blue'

}
const Dialog = (props) => {
    const obj = props.isShow ? { display: 'block' } : { display: 'none' };
    return <ThemeContext.Consumer>{(context)=>{
        return ReactDom.createPortal(
        
           <div style={Object.assign({}, styleObj, obj)}><p>{context.background}</p> {props.children}</div >
           
        
    , document.body)}}</ThemeContext.Consumer>
}

export default Dialog;