0

Estou utilizando esse React Material Modal. Nos exemplos, ao abrir o modal, ele é envolto de uma borda azul, há alguma forma de remover esse efeito?

Eu vi na api do Modal que possui uma propriedade disableAutoFocus porém eu já setei como "true" e meu modal continua tendo essa borda azul:

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

Há alguma forma de remover essa borda?

1
  • No className={classes.modal} vc não consegue tirar a borda?
    – nanquim
    Commented 14/03/2020 às 2:40

1 Resposta 1

1

Ola,

Sim é possível, a documentação fala sobre porém não tem um exemplo claro de como fazer, mas é através da propriedade CSS outline: 0. Abaixo o trecho da documentação que cita.

"Você pode desativar o contorno (muitas vezes azul ou ouro) com a propriedade CSS outline: 0."

A propriedade deve ser aplicada no elemento do corpo da Modal. Abaixo segue um trecho com exemplo utilizando na propriedade em linha 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .