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

对于引导变量覆盖：

// 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
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";

然后，您可以应用样式。

Answer 2

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

使用npm install react-bootstrap
安装SASS预处理器（https://sass-lang.com/install）
创建用于覆盖引导程序_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">

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

Answer 3

@Matze的方法似乎无法正常工作，但是（+1）可以帮助我找到解决方案。例如，您不能设置边框半径，并且颜色变化也不会对所有组件产生影响。

通过使用命令行，导航到您的项目并运行此npm install --save node-sass

之后：

/* index.scss */

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

$border-radius: 10rem;

@import 'bootstrap/scss/bootstrap';

/* The rest of your styles can go below */

现在，您只需打开App.js或index.js并添加import './index.scss'。

// index.js

import React from "react"
import ReactDOM from "react-dom"

import './index.scss'

import App from "./components/App"

ReactDOM.render(
  <App />
  document.getElementById("root")
)

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

3 个答案: