如何更改 react bootstrap scss 文件的样式？

Question

我正在为网站创建页脚。在那里，我添加了一些带有 fontawesome 的图标，并在其中使用了锚标签。现在由于 react bootstrap scss 文件中锚标记的样式，我的图标变蓝了，我无法更改它们。我能做什么？

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {fab, faYoutube, faFacebook, faGithub} from "@fortawesome/free-brands-svg-icons";
import React from 'react';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(fab, faYoutube, faFacebook, faGithub);

const Footer = () => {
    const today = new Date();
    const year = today.getFullYear();
    return (
        <footer className='text-center mt-auto bg-danger text-white fst-italic d-lg-flex justify-content-between'>
            <h3 className='p-3'>Copyright &copy; {year} by Fruit Jet</h3>
            <div className='fs-2 text-white d-inline-flex'>
                <div className='p-3'>
                    <a href="https://www.facebook.com/groups/288111895977592" target="_blank" rel="noopener noreferrer">
                        <FontAwesomeIcon icon={['fab', 'fa-facebook']} />
                    </a>
                </div>
                <div className='p-3'>
                    <a href="https://www.youtube.com/c/ProgrammingHero" target="_blank" rel="noopener noreferrer">
                        <FontAwesomeIcon icon={['fab', 'fa-youtube']} />
                    </a>
                </div>
                <div className='p-3'>
                    <a href="https://github.com/ProgrammingHero1" target="_blank" rel="noopener noreferrer">
                        <FontAwesomeIcon icon={['fab', 'fa-github']} />
                    </a>
                </div>
            </div>
        </footer>
    );
};

export default Footer;

This picture tells that a file from react bootstrap is generating this blue color

Answer 1

为了自定义 bootstrap 我在 App 根目录中创建了一个文件 index.scss，并将其导入到 index.js 或 index.tsx（如果您使用 Typescript）中我的应用程序的根。在 index.scss 之上，我导入 bootstrap .scss 文件：

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

然后您可以在下面设置您想要的样式，它将覆盖 bootstrap 样式。

Answer 2

你有很多选择：

使用样式属性 - style={{ color: "white" }}
使用class名称属性。在这里您可以直接使用 bootstrap class 或创建您自己的 className="text-white"
创建 css 或 scss 并直接或通过 class 定位链接：a svg { color: white; }
您还可以覆盖 bootstrap 默认值，这样您的所有链接都是白色的。

这真的取决于你想要达到的目标。通常，您可以使用您选择的工具覆盖 bootstrap 样式。如果不起作用，请添加“!important”。

请查看以下代码沙盒： https://codesandbox.io/s/eloquent-haze-764x9l

如何更改 react bootstrap scss 文件的样式？

How to change style from react bootstrap scss file?

reactjs

react-bootstrap