React项目使用Bootstrap时无法修改Alert组件提示消息颜色

问题原因 #

你调用showAlert方法时传入的type参数为大写的Success，Bootstrap内置的alert组件状态类要求全小写，拼接后生成的alert-Success不存在匹配的Bootstrap样式，因此提示消息颜色不生效。

解决方案 #

方案1：修改App.js传参（推荐）

直接调整showAlert调用时的type参数为全小写即可匹配Bootstrap样式：

// App.js 中修改togglemode函数
const togglemode = () => {
  if (mode === "light") {
    setMode("dark");
    document.body.style.backgroundColor = "#042743";
    showAlert("暗黑模式已启用", "success");
  } else {
    setMode("light");
    document.body.style.backgroundColor = "white";
    showAlert("浅色模式已启用", "success");
  }
};

方案2：修改Alert组件兼容大小写

如果希望后续传参无需关注大小写，可以在Alert组件拼接类名时统一转小写：

// Alert.js 中修改div的className属性
<div
  className={`alert alert-${props.alert.type.toLowerCase()} alert-dismissible fade show`}
  role="alert"
>
  <strong>{capital(props.alert.type)}</strong>: {props.alert.msg}
</div>

暗黑模式适配（可选） #

如果需要让Alert在暗黑模式下显示效果更协调，可以在App.css中添加自定义样式：

/* 暗黑模式下success类Alert的样式 */
.alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
}
@media (prefers-color-scheme: dark) {
  .alert-success {
    background-color: #0f5132;
    color: #d1e7dd;
    border-color: #0a3622;
  }
}

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