2022/04/08 alert 창 라이브러리 SweetAlert 사용법

괴발새발자 2022. 4. 8. 12:05

https://sweetalert.js.org/guides/

SweetAlert

NPM combined with a tool like Browserify or Webpack is the recommended method of installing SweetAlert. npm install sweetalert --save Then, simply import it into your application: import swal from 'sweetalert'; You can also fi

sweetalert.js.org

CSS를 전역에서 수정해서 프로젝트에 적용한 것.

hover 설정 적용하려면 !important 붙여줘야한다.

버튼 위치 center로 오게하고 싶으면 footer에서 조정함.

.swal-button {
  font-size: medium;
  background-color: white;
  color: black;
  border-radius: 20px;
  border: 2px solid black;
}

.swal-modal {
  background-color: white;
  width: 20rem;
}

.swal-button:focus {
  box-shadow: none;
}

.swal-button:hover {
  background-color: black !important;
  color: white;
}

.swal-footer {
  text-align: center;
  margin-bottom: 1rem;
}