时间戳

首页 > 解决方案 > 覆盖 Bootstrap 5 颜色不会改变 btn 颜色类

css - 覆盖 Bootstrap 5 颜色不会改变 btn 颜色类

问题描述

按照这里的本教程，我已经成功地在我的 React 应用程序中覆盖了 Bootstrap 5 默认颜色create-react-app。在我的内部/src/scss/custom.scss，我可以调用任何新定义的变量并随意使用它，甚至内部新创建的类custom.scss也可以正常工作。然而，使用颜色（as 或 ）的默认 Bootstrap 类btn-primary根本bg-secondary没有text-white改变。例如，当我使用btn-primary时，按钮颜色是与默认 Bootstrap 原色相同的旧蓝色。

我错过了什么？

标签： cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

解决方案

确保在custom.scss. _ 这将使您的更改覆盖 Bootstrap 中的主题颜色! defaultvariables.scss（在 bootstrap.scss 中引用）。

/* custom.scss */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

对 Codeply 做出反应

另外，请注意本文不必要地重新构建主题颜色映射，除非您添加新的主题颜色变体，否则这是不必要的，即；$重音。

另请参阅：无法在引导程序中覆盖 $theme-color

推荐阅读