How to select a ReactJS component in CSS

Question

I am trying to set some CSS values to some ReactJS components.

Is there a way to access the components by their component?

Imagine this ReactJS component:

import './assets/css/custom.css'

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" sticky="top" className="navbar-custom-main">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mx-auto justify-content-center ">
          <Nav.Link href="#features" clas>Home</Nav.Link>
          <Nav.Link href="#pricing">Little Do you Know</Nav.Link>
          <Nav.Link href="#pricing">My Work</Nav.Link>
          <Nav.Link href="#pricing">Resume</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

How can I set the font color for Nav.Link part using CSS?

I tried this in my custom.css :

Nav Nav.Link {
color: "red"  !important;
}

And it doesn't work. Is there a way I can do this?

Answer 1

Give the component id or class and just add css to that id/class

---

Example:

<Nav.Link className={'active'} href="#features" clas>Home</Nav.Link>

.active: {color: red;}

Answer 2

<Nav.Link> components are actually rendered just as a combination of <div/> and <a class="nav-link"/> elements, you can tell if you inspect your element. So, Nav and Nav.Link CSS selectors certainly won't hit these components.

Ideally, give your component an id, or a class and set the CSS...

<Nav.Link href="#pricing" id="orange">Resume</Nav.Link>
#orange { color: "orange" };

Or:

<Nav.Link href="#pricing" className="orange">Resume</Nav.Link>
.orange { color: "orange" };

Or, if that doesn't work, you can do it brute force way...

style = { color: "orange" };
<Nav.Link href="#pricing" style="{style}">Resume</Nav.Link>

The first approach is recommended, because it is scalable and easier to develop with.

Answer 3

You need to inspect element to find class name where you want to apply css.

In your case, React-bootstrap <Nav.Link> component has nav-link class:

.navbar-custom-main .nav-link {
 ...
} 

Answer 4

Is Nav.Link a component you have written?

If you have written the component edit the code of the component instead of style it from outside with a class and nested CSS selectors.

If the component is imported from a library and you want to edit it (without editing node_modules files) you can inspect the HTML elements the Nav.Link component is rendering. It could have CSS classes you can modify with your custom CSS.

Other option that I use with Ant Design library, which can be a little tricky to style, is Styled Components, making a custom component which wraps the library component with a styled-components div, style it as needed and importing my custom component instead of the library one.

Answer 5

You can also use Ctrl F... Find Nav.Link... Replace Nav.Link className="orange"...

You can find all instances and replace them all easily. Hope this helps:)