How to remove blue border from React Material Modal?

Question

I’m using that React Material Modal. In the examples, when opening the modal, it is wrapped in a blue border, there is some way to remove this effect?

I saw on the Modal api that owns a property disableAutoFocus but I’ve already set it as "true" and my modal keeps having this blue border:

<Modal
        disableAutoFocus="true"
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >

Is there any way to remove that edge?

Answer 1

Hello,

Yes it is possible, the documentation talks about but does not have a clear example of how to do, but it is through the CSS property Outline: 0. Below the excerpt from the documentation you quote.

"You can disable the border (often blue or gold) with the Outline CSS property: 0."

The property should be applied to the Modal body element. Below follows an example passage using in the online property style.

  <div>
    <button type="button" onClick={handleOpen}>
      Open Modal
    </button>
    <Modal
      open={open}
      onClose={handleClose}
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
    >
      <div style={{ outline: 0 }} className={classes.paper}>
        <h2 id="simple-modal-title">Text in a modal</h2>
        <p id="simple-modal-description">
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
        </p>
      </div>
    </Modal>
  </div>