如何自定义SweetAlert2样式：修改关闭按钮颜色与输入框背景色

网上多数示例无法生效，核心问题是未匹配正确的官方内置类名、CSS优先级不足，或是样式写在带作用域隔离的样式块中，无法命中SweetAlert2渲染到全局的DOM节点。无需在调用配置中传入自定义类，直接按以下方式编写样式即可：

右上角X形关闭按钮颜色修改 #

关闭按钮的内置选择器为.swal2-close，搭配弹窗容器类提升选择器优先级即可覆盖默认样式：

/* 设置关闭按钮默认颜色，可按需替换色值 */
.swal2-container .swal2-close {
  color: #ffffff;
}
/* 可选：设置鼠标悬浮、聚焦时的按钮颜色 */
.swal2-container .swal2-close:hover,
.swal2-container .swal2-close:focus {
  color: #f0f0f0;
}

内置text类型输入框背景色修改 #

内置文本输入框的选择器为.swal2-input，直接设置背景属性即可：

/* 设置输入框背景色，可按需替换色值 */
.swal2-container .swal2-input {
  background: #ffffff;
  /* 可选：按需调整文字颜色、边框样式 */
  color: #333333;
  border: 1px solid #dddddd;
}

生效说明 #

• 以上CSS建议写入全局样式文件。如果在Vue/React等框架的单文件组件中使用带scoped标识的局部样式，需要用框架对应的深度选择器（如Vue的:deep()）包裹上述选择器，否则无法选中弹窗DOM。
• 原有弹窗调用逻辑无需修改，保持原有写法即可正常生效：

Swal.fire({
    title: 'Hello',
    text: 'Insert your name',
    confirmButtonText: 'REGISTER',
    background: 'orange',
    input: 'text',
    showCloseButton: true
});

内容的提问来源于stack exchange，提问作者emiliorivas16