How to change <Nav.Link> text color in React?

Question

I have tried everything possible(inline, another CSS file you name it) but nothing seems to work.

I am trying to make a Navbar using React bootstrap.

This one: https://react-bootstrap.github.io/components/navbar/

Here's my code:

import React from 'react';
import './Navbar.css';
import Logo from './Logo.png';
import { Nav, Navbar, NavDropdown, FormControl, Button, Form } from "react-bootstrap";

const Nabar=()=>{
    return(

        <Navbar fixed="top" expand="sm" >

            <Navbar.Brand href="/">
            <img 
                src={Logo}
                style={{width:'10em', Height:'10em'}}
                className="d-inline-block align-top"
                alt="Youth Math Logo"
            />
            </Navbar.Brand>

            <Navbar.Toggle aria-controls="basic-navbar-nav" />

            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">

//------------------------Over Here-----------------------------------------------------------------
                    <Nav.Link className="home" href="#home">Home</Nav.Link>
                    <Nav.Link href="#link">Link</Nav.Link>
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
                <Form inline>
                    <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                    <Button variant="outline-success">Search</Button>
                </Form>
            </Navbar.Collapse>

        </Navbar>
    );
}

export default Nabar;

I want to change it's color from default to white.

Answer 1

Try this:

  .nav-link{
    font-family: 'Roboto', sans-serif;
    color: #2699FB !important;
  }

inside "{}" put what you want, do not forget the "!important"

Answer 2

Instead of <Nav.Link href="#link">Link</Nav.Link>

write

<Nav.Link href="#link"><h4 className="linkText">Link</h4></Nav.Link>

Followed by CSS

.linkText{ color: white ; }