无法将自定义样式应用于 SweetAlert2

如何解决无法将自定义样式应用于 SweetAlert2

希望你一切顺利。

我在 Vue.js 项目中使用 SweetAlert2 库，除了自定义样式之外，该库的所有功能都运行良好。根据他们自定义弹出窗口的文档，您应该向选项对象添加一个 customClass 字段，您可以在其中为弹出窗口的每个组件定义自定义类名，这正是我所做的。但风格永远不会改变。

我包含库的代码： import Swal from 'sweetalert2'

用于触发 swal 弹出窗口的代码：

Swal.fire({
        confirmButtonText: this.confirmBtnTxt,allowOutsideClick: false,showCancelButton: false,title: `Hello ${this.user.firstName} ${this.user.lastName}`,text: 'Can you please confirm your company',input: 'select',customClass: {
          container: 'pp-container',popup: 'pp',header: 'pp-header',title: 'pp-title',content: 'pp-content',htmlContainer:'pp-html-container',input: 'pp-input'
        },

如您所见，我已经提供了所有必要的自定义类名称，并且在组件的样式部分给出了这些类的样式规则：

// Customising swal alerts 
.pp{
  Box-shadow: 0 3px 20px -10px #4a4a4a;
  background:black;
}
.pp-title{
  display: flex;
  font-size: 1.2rem;
  color: black;
  font-weight: 500;
}
.pp-input{
  display: flex;
  border: none;
  background: #f0f2f7;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 2rem;
}
.pp-html-container{
  display: block;
  font-size: 0.9rem;
  color: #9a9a9a;
}

但是正如你所看到的，样式没有改变。

Screenshoot