使用 scss 为 react-bootstrap 自定义样式

Question

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

我在 create react app 页面上遵循了一个简短的教程，并且能够覆盖默认变量，如主要、次要等。我也导入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

它基本上归结为以下步骤：

1. 使用下载引导程序 npm install react-bootstrap
2. 安装 SASS 预处理器 ( https://sass-lang.com/install )
3. 创建重写引导的一个SCSS文件_variables.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";

4. 转译您的stylesheet.scsstostylesheet.css并添加对您的 head 部分的引用，如下所示：<link rel="stylesheet" href="stylesheet.css">

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

1. 如何自定义引导程序
2. 主题引导

Answer 2

对于引导变量覆盖：

// Override Bootstrap Variables.
// For example: $grid-gutter-width-base:  20px;
// For example: $grid-gutter-width: 20px;

@import "bootstrap-overrides";

//Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";

对于组件的自定义样式：您需要在文件开头导入 bootstrap

// Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";

之后，您可以应用您的样式。