How to use the react-modal.defaultStyles function in react-modal

/**
 * Global modal centered floating element with custom title and a body building
 * function to allow more flexibility while creating the body.
 */
import React, { Component } from 'react';
import Modal from 'react-modal';


// Change to dark color theme.
Modal.defaultStyles.overlay.backgroundColor = '#333333AA';
Modal.defaultStyles.content.backgroundColor = '#222222CC';
Modal.defaultStyles.content.border = '#333333CC';


class GlobalModal extends Component {
    render() {
        return

/**
 * Global modal centered floating element with custom title and a body building
 * function to allow more flexibility while creating the body.
 */
import React, { Component } from 'react';
import Modal from 'react-modal';


// Change to dark color theme.
Modal.defaultStyles.overlay.backgroundColor = '#333333AA';
Modal.defaultStyles.content.backgroundColor = '#222222CC';
Modal.defaultStyles.content.border = '#333333CC';


class GlobalModal extends Component {
    render() {
        return

import {
  bodyModalStyle,
  modalStyle,
  modalSmall,
  modalNormal,
  modalLarge,
  InnerWrapper,
} from './Modal2.styles';

import { Provider } from './Modal2.context';

const reactModalProps = ['isOpen', 'onAfterOpen', 'onRequestClose', 'closeTimeoutMS', 'style', 'contentLabel', 'portalClassName', 'overlayClassName', 'className', 'bodyOpenClassName', 'htmlOpenClassName', 'ariaHideApp', 'shouldFocusAfterRender', 'shouldCloseOnOverlayClick', 'shouldCloseOnEsc', 'shouldReturnFocusAfterClose', 'role', 'parentSelector', 'aria', 'data', 'overlayRef', 'contentRef'];

ReactModal.defaultStyles = {
  overlay: {
    ...ReactModal.defaultStyles.overlay,
    backgroundColor: 'rgba(0,0,0,.3)',
    display: 'flex',
    flexDirection: 'column',
    zIndex: 2030,
  },
  content: {
    ...ReactModal.defaultStyles.content,
    background: 'none',
    border: 'none',
    padding: '20px 15px',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
};

import {environment} from 'environments/environment';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactModal from 'react-modal';

import {AppModule} from 'app/app.module';
import {ErrorHandler} from 'app/components/error-handler';
import {setupCustomValidators} from 'app/services/setup';


if (!environment.debug) {
  enableProdMode();
}

setupCustomValidators();
ReactModal.defaultStyles.overlay = {};
ReactModal.defaultStyles.content = {};

const domContainer = document.querySelector('#error-handler-root');
ReactDOM.render(React.createElement(ErrorHandler), domContainer);

platformBrowserDynamic().bootstrapModule(AppModule);

afterModalOpen() {
    ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(128,128,128,0.75)';
    ReactModal.defaultStyles.content.display = 'flex';
  }

import React from 'react';
import './css/stock-update-modal.css';
import Modal from "react-modal";
import TruckTable from './truck-table';
import processRequest from "./api";

Modal.setAppElement(document.body);

Modal.defaultStyles.overlay.backgroundColor = 'cornflowerblue';
const REGULAR_STYLES = {
    content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)',
        backgroundColor: '#001e00',
        color: 'yellow',
        border: '1px solid yellow',
        borderRadius: '7px 7px 7px 7px',
        boxShadow: '-7px -7px 17px 7px #001e00',
        maxWidth: '800px',
        height: '50%'
    },

return <div>;
    }
  }
}

ShareModal.propTypes = {
  uid: PropTypes.string.isRequired,
  css: PropTypes.string,
  isOpen: PropTypes.bool,
  onRequestClose: PropTypes.func,
  closeModal: PropTypes.func,
  url: PropTypes.object.isRequired,
  t: PropTypes.func.isRequired
};
if (process.browser) ReactModal.setAppElement("#main");
ReactModal.defaultStyles.overlay.backgroundColor = "rgba(30,30,30,0.75)";

export default ShareModal;
</div>

}

class Modal2 extends PureComponent {
  static Title = ModalTitle;
  static Subtitle = ModalSubtitle;
  static Image = ModalImage;
  static Content = ModalContent;
  static Description = ModalDescription;
  static Help = ModalHelp;
  static Scroll = ModalScroll;
  static Footer = ModalFooter;
  static Trigger = ModalTrigger;
  static InnerWrapper = InnerWrapper;
  static CloseIcon = ModalCloseIcon;
  static Inner = ModalInner;
  static defaultStyles = ReactModal.defaultStyles;

  static propTypes = {
    defaultVisible: PropTypes.bool,
    onOpen: PropTypes.func,
    onClose: PropTypes.func,
    closable: PropTypes.bool,
    Title: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Subtitle: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Image: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Content: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Description: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Help: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Scroll: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Footer: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Trigger: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
    Inner: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),

afterModalOpen() {
    ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(128,128,128,0.75)';
    ReactModal.defaultStyles.content.display = 'flex';
  }

import React from "react";
import "./css/stock-update-modal.css";
import Modal from "react-modal";
import StockUpdateTable from "./stock-update-table.js";
import StockUpdateDelete from "./stock-update-delete.js";
import processRequest from "./api.js";

Modal.setAppElement(document.body);

Modal.defaultStyles.overlay.backgroundColor = "cornflowerblue";
const REGULAR_STYLES = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)",
    backgroundColor: "#001e00",
    color: "yellow",
    border: "1px solid yellow",
    borderRadius: "7px 7px 7px 7px",
    boxShadow: "-7px -7px 17px 7px #001e00",
    maxWidth: "800px",
    maxHeight: "95%"
  },