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

Question

我正在使用 Node JS、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>

第一个样式已被覆盖，效果很好，我可以更改选项卡的字体大小，但第二个样式不起作用。

如何为二级菜单设置背景颜色？

编辑我:

我已将一个 id 添加到 nav.link 并使用此 id 访问样式，但它不起作用:(

这是我的代码:

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

这些是我的风格:

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

#home .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>

CSS:

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

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

Answer 1

您可以将新类添加到您的第二个菜单中。如果添加 .submenu至 <Nav justify variant="pills">您可以使用 css 自定义您的代码。

代码:

<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 */
}