How to put the customStyles content for modal styling in SCSS or CSS file?

[AtlasMaxima-zz]

Currently, I have placed the following customStyles within the component's file.js but I want to put the customStyles into my scss or css file.

1. I have put className for <Modal className="modal-alert"... </Modal> and put the exact style that for .modal-alert but it's not responding as if I were to just use the following way.

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

Basically, I just want to be able to put the following inside of a CSS file and not in the component file itself.

 top                   : '50%',
 left                  : '50%',
 right                 : 'auto',
 bottom                : 'auto',
 marginRight           : '-50%',
 transform             : 'translate(-50%, -50%)'

[diasbruno]

Hi @atlasmaxima, can you please check what class name has been generated in your modal with <Modal className="modal-alert"... </Modal>? You can use the browser inspect element.

[diasbruno]

@paintedbicycle, I think this comment is the correct answer for this issue.

Also, this comment has some guidelines about this issue.

Let me know if those references helps.