Toastr组件CSS设置背景颜色无效，始终显示蓝色问题求助

你的自定义.toast-info背景色不生效，核心是CSS优先级冲突或样式加载顺序问题，以下是具体解决思路：

1. 提升选择器优先级 #

toastr官方样式中，.toast-info的背景色可能通过更具体的选择器定义（比如带父容器前缀），导致你的单一类选择器优先级不足。可以将选择器改为更具体的形式：

.toast-container .toast-info {
  background-color: rgb(140, 71, 71);
}

若仍不生效，可临时用!important强制覆盖（仅用于排查，不推荐长期依赖）：

.toast-info {
  background-color: rgb(140, 71, 71) !important;
}

2. 调整CSS加载顺序 #

确保你的自定义CSS文件在toastr官方CSS文件之后引入，比如HTML中的引入顺序：

<link rel="stylesheet" href="toastr.css">
<link rel="stylesheet" href="你的自定义样式.css">

相同优先级的样式，后加载的会覆盖先加载的规则。

3. 改用JS配置直接设置 #

如果开发者工具显示元素存在内联背景样式（被toastr默认脚本注入），此时CSS难以覆盖，可以直接在toastr配置中指定背景色：

toastr.options = {
    "closeButton": false,
    "debug": false,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-bottom-full-width",
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "0",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut",
    "backgroundColor": "rgb(140, 71, 71)" // 新增这行
}
toastr.info(`Right Number ${rightGuessString}. Game Over.`);

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