Css 如何为同一页面中的同一组件提供两种不同的样式？

我正在用NodeJS、React和Bootstrap开发一个web应用程序。我有一个主菜单和一个辅助菜单，两个菜单都有标签。我已经为主菜单定义了一个样式。我想给二级菜单赋予一种不同的风格，但我遇到了一些问题，因为应用于二级菜单的风格最终也应用于主菜单

我只是让它为辅助菜单选项卡的字体大小提供个性化的样式，但我想自定义辅助菜单选项卡的背景色

现在，我有了这个：

我想用不同的字体大小和背景颜色自定义辅助菜单。为此，我必须覆盖这些样式：

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

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

以下是辅助菜单的代码：

<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>

变更对设计没有影响：(

编辑II:

                            <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>

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

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

如果我向标记中添加一个类，它对我不起作用：（相反，我丢失了自定义的字体大小

代码：

                            <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>

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

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

---

可以将新类添加到第二个菜单中。如果将

.submenu

添加到

中，则可以使用css自定义代码

代码：

---

谢谢你的帮助，但对我不起作用：（我编辑了我原来的帖子。再次感谢你的帮助，但对我不起作用：（我编辑了我原来的帖子。

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

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

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