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

【问题标题】：Custom styling with scss for react-bootstrap使用 scss 为 react-bootstrap 自定义样式
【发布时间】：2023-03-18 16:08:01
【问题描述】：

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

我遵循了创建反应应用页面上的简短教程，并且能够覆盖默认变量，如主要、次要等。我还导入了文件的 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

这将覆盖引导样式

【问题讨论】：

标签： reactjs sass bootstrap-4 react-bootstrap

【解决方案1】：

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

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

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

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

【讨论】：

您好，我可以覆盖颜色，但无法获得悬停颜色。它仍然是默认的引导样式被应用
尝试覆盖$link-hover-color，如果我的回答有帮助，请投票或接受。还可以查看_variables.scss 文件中可以覆盖的元素，
我确实尝试过覆盖悬停颜色但没有用，所以我决定只覆盖整个引导文件。

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

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

【讨论】：

我照你说的做了，还是一样
你在哪里调用编译的.css文件？
另外，你在哪里定义了颜色变量？
我正在使用带有 node-sass 的 create react app 进行编译，所以我看不到编译后的 css（我不知道至少在哪里）我在 main.scss 文件中定义了变量
检查这个：scotch.io/starters/react/…

【解决方案3】：

@Matze 的方法似乎无法正常工作，但 (+1) 帮助我找到了解决方案。例如，您不能设置border-radius，并且颜色更改不会对所有组件产生影响。

通过使用命令行，导航到您的项目并运行此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")
)

【讨论】：