CODEWITHSUNDEEP
javascriptcssreactjsmodal-dialogstyles
Lizz Parody
Lizz Parody

Reputation: 1765

Change the style of a modal using react-modal

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?

Upvotes: 9

Views: 28647

Answers (5)

Emidomenge
Emidomenge

Reputation: 1534

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,
  },
});

Upvotes: 0

eslam elameen
eslam elameen

Reputation: 633

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

Upvotes: 0

Діма Ліщинський
Діма Ліщинський

Reputation: 11

 <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>

Upvotes: 1

SSS
SSS

Reputation: 116

It should be portalClassName:

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

Upvotes: 10

Lucas Kellner
Lucas Kellner

Reputation: 441

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]}
>

Upvotes: 3

Related Questions