How can I give two different styles to a same component in the same page?

Question

I'm developing a web application with Node JS, React and Bootstrap. I have a main menu and a secondary menu both made it with tabs. I have defined a style for the main menu. And I would like to give a different style to the secondary menu, but I've got problems because the style applied to the secondary menu finally is applied to the main menu too.

I just only get it to give a personalized style to the font-size of the tab of the secondary menu, but I would like to customize the background color to the tabs of the secondary menu.

Right now, I've got this:

I want to customize the secondary menu with a different font size and background color. To do that I have overwrite these styles:

.nav-pills .aux{
    font-size: 12pt !Important;
}

.nav-link.active .aux{    
    background-color: #1302ff !Important;
}

These are the code of the secondary menu:

<Tab.Container id = "submenu" defaultActiveKey = "home">
    <Row>
        <Col md = {12}>
            <Nav justify variant="pills">
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "home">Home</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "teams">Equipos</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "results">Resultados</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link className = "aux" eventKey = "stats">Estadísticas</Nav.Link>
                </Nav.Item>
            </Nav>
        </Col>
    </Row>
</Tab.Container>

The first of the styles have been overwritten works fine, I get to change the font size of the tab, but the second style doesn't work.

How can I set a background color to the secondary menu?

Edit I:

I have add an id to the nav.link and access to the style using this id, but it doesn't work :(

This is my code:

<Nav.Item>
    <Nav.Link id = "home" className = "aux" eventKey = "home">Home</Nav.Link>
</Nav.Item>

And these are my styles:

.nav-pills .aux{
    font-size: 12pt !Important;
}

#home .nav-link.active .aux{    
    background-color: #1302ff !Important;
}

The changes has no effect over the design :(

EDIT II:

If I add a class to the tag it doesn't work to me :( On the contrary, I lost the font-size customized.

Code:

                            <Nav justify variant="pills" className = "submenu">
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "home">Home</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "teams">Equipos</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "results">Resultados</Nav.Link>
                                </Nav.Item>
                                <Nav.Item>
                                    <Nav.Link className = "aux" eventKey = "stats">Estadísticas</Nav.Link>
                                </Nav.Item>
                            </Nav>

CSS:

.submenu > .nav-pills .aux{
    font-size: 12pt !Important;
}

.submenu > .nav-link.active .aux{    
    background-color: #1302ff !Important;
}

Answer 1

You can add the a new class to your second menu. If you add .submenu to <Nav justify variant="pills"> you can customize your code using css.

Code:

<Nav justify variant="pills" className="submenu">

CSS:

.submenu > .nav-pills .aux {
    font-size: 12pt !important;
}

.submenu > .nav-link.active .aux {    
    background-color: #1302ff !important;
    /* Add new styles here */
}