How to change style from react bootstrap scss file?

Question

I was creating a footer for a website. There I added some icons with fontawesome and use anchor tags with them. Now because of the style of anchor tag from a react bootstrap scss file my icons are getting blue and I can't change them. What can I do?

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

You have many options:

• Use style attribute - style={{ color: "white" }}
• Use className attribute. Here you can just directly use a bootstrap class or create your own className="text-white"
• Create a css or scss and target links directly or via class: a svg { color: white; }
• You can also override bootstrap defaults, so ALL your links are white.

It really depends on what you try to achieve. Generally you can just override bootstrap styles with tool of your choice. If it doesn't work, add "!important".

Please look into following code sandbox: https://codesandbox.io/s/eloquent-haze-764x9l