SweetAlert2自定义className样式不生效问题咨询

核心问题溯源 #

这个样式失效的问题确实和SweetAlert2的主CSS规则、配置属性的绑定目标直接相关，和你反复更换的类名本身没有关系，本质问题来自两方面：

• 配置绑定目标错位：你代码中使用的className配置项，作用是给整个SweetAlert弹窗的最外层根节点绑定自定义类，而非单独给标题元素绑定类。你编写的.styleTitle { font-size: 25px; }是直接给弹窗根节点设置字号，并不会命中标题元素本身，自然无法实现预期的标题样式修改效果。
• 内置样式优先级覆盖：SweetAlert2主CSS中对标题、弹窗主体、按钮等组件设置了带层级的专属选择器，如果你写的自定义类选择器优先级低于内置选择器，就算类名绑定到了正确的节点位置，自定义样式也会被内置默认样式覆盖。

可直接复用的解决方案 #

方案1：使用元素专属的类配置项 #

SweetAlert2为弹窗的每个组成部分提供了独立的类名绑定入口，不需要依赖全局根类做穿透选择，针对标题元素的专属配置项为titleClass：

swal.fire({
  title: 'Welcome',
  // 直接将自定义类绑定到标题元素本身
  titleClass: 'styleTitle'
});

为了规避内置样式的优先级覆盖，写CSS时可以连带弹窗的内置上下文提高选择器优先级：

.swal2-popup .styleTitle {
  font-size: 25px;
}

方案2：基于全局根类做样式穿透 #

如果你希望保留原有的全局className配置，不需要调整绑定逻辑，只要修正CSS的选择器命中路径即可：
原配置代码不需要改动：

swal.fire({
  title: 'Welcome',
  className: 'styleTitle'
});

此时需要修正CSS的写法，不能直接给自定义根类设置字号，而是要选中自定义类下的内置标题节点：

/* 错误写法：直接给根节点设样式，无法作用于标题 */
/* .styleTitle { font-size: 25px; } */

/* 正确写法：穿透选择到内置标题元素 */
.styleTitle .swal2-title {
  font-size: 25px;
}

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