11.18 항해 67일차 TIL

• SweetAlert2 Lib 를 이용해서 아래와 같은 Alert를 구현 하려고 했다.
  

처음엔 딱히 막히는 것 없이 하다가 css를 더 원하는 대로 만져보려고 하니 문제가 발생했다.

검색을 해보면 전부 아래와 같이 className을 주고 css를 주면 된다는데 도대체 어디에서 클래스를 불러야 하는지 이해가 안된다..

.border-radius-0 {
  border-radius: 0;
}

Swal.fire({
  ...
  customClass: {
    popup: 'border-radius-0'
  }

• 부모 태그가 있어야지 부를 수 있는거 아닌가?..
• Provider밖에 있는데 어떻게 클래스로 css를 주지?
  

한참을 삽질 하다가 진짜 마지막 방법으로 css 파일을 하나 만들어서 적용을 해 보았다.

Swal.fire({
  ...
  customClass: {
      popup: 'swal-popup',
      title: 'swal-title',
      cancelButton: 'swal-cancel',
      confirmButton: 'swal-confirm',
    }
  }

// alert.css
.swal-popup {
  border-radius: 30px;
  width: 730px;
  min-width: 500px;
}

.swal-title {
  margin-top: 56px;
  padding: 0px;
  padding-left: 10px;
}

.swal2-actions {
  margin-right: 0px;
}

.swal-cancel {
  margin: 0px;
  padding: 0px 10px;
}

.swal-confirm {
  margin: 0px;
  padding: 0px 10px;
  margin-right: 98px;
}

결과..

이건 성공 하고 기쁘다기 보단 너무 어이가 없었다..

컴포넌트 별로 styled-components 를 주는 것이 더 보기 편하지 않나 하는 생각에 css파일을 굳이 따로 만들어서 써야하나? 하는 생각을 가지고 있었는데 처음 부터 버릇이 그렇게 들어서 따로 만들어서 적용 해봐야겠다는 생각 자체가 안들었던 것 같다.. 오늘은 매우 화남