Change the style of a modal using react-modal

Question

I have this object, with the styles I want for the modal:

const customStyles = {
  content: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)',
  },
};

Then I pass that styles to the modal like this:

            <Modal
              isOpen={this.state.modalIsOpen}
              onRequestClose={this.closeModal}
              style={customStyles}
            >

And it works fine but I want to pass a class, not create a customStyle object inside the component.

I try something like this, first creating the modal class:

.modal {
  top: '35%';
  left: '50%';
  right: 'auto';
  bottom: 'auto';
  marginRight: '-50%';
  width: '60%';
  transform: 'translate(-40%, -10%)';
}

and then:

            <Modal
              isOpen={this.state.modalIsOpen}
              onRequestClose={this.closeModal}
              className="modal"
            >

But it didn't work. What am I doing wrong?

Fabricant

It doesn't seem to me as though you're doing anything wrong. It's possible that you're not including your CSS or that you have already loaded in something that is overriding what your CSS does. Try changing the name of the class you are applying to see if that works. Otherwise use a console inspector to see if anything is taking precedence over your CSS, or if it's loaded in at all. – Chilly

Answer 1

It should be portalClassName:

<Modal
  isOpen={this.state.modalIsOpen}
  onRequestClose={this.closeModal}
  portalClassName="modal"
>

Creation

This completely solves OP's (and my) issue and should really be the accepted answer imo. – Bannerman

Answer 2

I think there might be a billion ways to do this, here is just one that uses CSS Modules. If you put your styles into a separate .css.js file you can import it in your module:

/// modal.css.js ///
export default {
  modal: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)'
  },
  greenText: {
    color: 'rgb(0,255,100)'
  },
  style3: {
    marginRight: '-25%'
  }
}

You can then assign your styles by accessing them as you would with any object and apply them to your component on the style attribute

import styles from './modal.css.js'

...

<Modal
  isOpen={this.state.modalIsOpen}
  onRequestClose={this.closeModal}
  style={styles.modal}
>

if you want to apply multiple styles to your component you give the style attribute an array. This would allow you to apply styles from multiple imported style objects.

<Modal
  isOpen={this.state.modalIsOpen}
  onRequestClose={this.closeModal}
  style={[styles.modal, styles.greenText]}
>

Pettifer

How can you style the background color of the modal (i.e. the overlay) this way? – Chiromancy

@Chiromancy you would follow the convention of an .overlay { } class, then add this to the Modal props: overlayClassName={styles.overlay} – Zoie

Answer 3

 <ReactModal id={this.state.dialogId}
              isOpen={showDialog}
              onRequestClose={this.onCancel.bind(this)}
              className={`shadow p-4`}
              style={{
                overlay: {
                  position: 'fixed',
                  zIndex: 1020,
                  top: 0,
                  left: 0,
                  width: '100vw',
                  height: '100vh',
                  background: 'rgba(255, 255, 255, 0.75)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                },
                content: {
                  background: 'white',
                  width: '45rem',
                  maxWidth: 'calc(100vw - 2rem)',
                  maxHeight: 'calc(100vh - 2rem)',
                  overflowY: 'auto',
                  position: 'relative',
                  border: '1px solid #ccc',
                  borderRadius: '0.3rem',
                }}}
              appElement={document.getElementById('root') as HTMLElement}> ... </ReactModal>

Elysha

Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made. – Ramekin

Answer 4

i tried this way and it works fine with me i added a simple class to the react modal tag

 <Modal
            size="sm"
            aria-labelledby="contained-modal-title-vcenter"
            className='modalStyle'
            centered
            show={prescriptionPreview}
            onHide={() => setPrescriptionPreview(false)}
        >

then i went to app.css and selected like this way

.modalStyle .modal-dialog 

and style it whatever you want

Infiltrate

Answer 5

Just in case you also need to handle different env file depending on your environment, e.g: .env.prod and .env.dev, then follow this:

1. Make sure that .env.prod and .env.dev are in the root directory of your project.

2. Load Environment Variables in next.config.js like that:

const dotenv = require('dotenv');

const environment = process.env.NODE_ENV || 'development';

if (environment === 'development') {
  dotenv.config({ path: '.env.dev' });
} else {
  dotenv.config({ path: '.env.prod' });
}

module.exports = withBundleAnalyzer({
  // ...
  env: {
    VALUE_1: process.env.VALUE_1,
    VALUE_2: process.env.VALUE_2,
    VALUE_3: process.env.VALUE_3,
  },
});

Stain