reactjs - 使用scss的自定义样式以进行react-bootstrap

Question

我正在使用react-bootstrap构建一个React应用程序。我想自定义react-bootstrap组件如何实现呢？

我在create react app页面上遵循了一个简短的教程，并且能够覆盖默认变量，例如primary，secondary等。我也导入了文件的bootstrap.scss结尾。

className = "btn-primary btn-sm"

<Button variant="primary" size="sm">
        Primary
 </Button>

.btn-primary {
  background-color: $primary;
  width: 40px;


  &:hover {
    background-color: var(--color-white);
    border: var(--btn-primary-border);

    span {
      color: $primary;
    }
  }

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

我希望上面的样式可以应用，但没有应用。仅应用背景色。

如果有人仍在寻找答案，这就是我所做的，并且对我有用。

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "your custom.css" here

这将覆盖引导样式

Answer 1

它基本上可以归纳为以下步骤:

使用npm install react-bootstrap下载 bootstrap

安装SASS预处理器(https://sass-lang.com/install)

创建一个用于覆盖 bootstrap 的_variables.scss的scss文件(确保_functions.scss，_variables.scss，_mixins.scss和bootstrap.scss的路径正确)

/* stylesheet.scss */

@import "bootstrap/scss/functions"; 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

/* Your customizations here */

$theme-colors: (
  primary: red;
);

@import "bootstrap";

将您的stylesheet.scss转换为stylesheet.css，并添加对您的头部的引用，如下所示:<link rel="stylesheet" href="stylesheet.css">

以下是一些可以帮助您入门的链接:

How to customize bootstrap

Theming Bootstrap