如何更改自举scss文件的样式？

Question

我在为一个网站创建一个页脚。在那里，我添加了一些图标与方框，并使用锚标记与他们。现在，由于响应引导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;

这张图片告诉我们，一个来自react引导程序的文件正在生成这个蓝色。

Answer 1

你有很多选择：

• 使用样式属性- style={{ color: "white" }}
• 使用className属性。在这里，您可以直接使用引导类或创建您自己的className="text-white"
• 直接或通过类创建css或scss和目标链接：a svg { color: white; }
• 您还可以覆盖引导默认设置，因此所有链接都是白色的。

这真的取决于你想要实现什么。通常，您可以使用您选择的工具重写引导样式。如果它不起作用，加上“！重要”。

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

Answer 2

为了自定义引导，我在App中创建了一个文件index.scss，并将其导入到index.js或index.tsx (如果您使用类型记录)中，这是我的应用程序的根。在index.scss之上，我导入了引导.scss文件：

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

然后在下面您可以样式您想要的，它将覆盖引导样式。