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>

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

如何为辅助菜单设置背景颜色？

编辑我：

我已经在nav.link中添加了一个ID，并使用该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;
}

更改对设计没有影响：（

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

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

如何在同一页面的同一组件中使用两种不同的样式？

1 个答案: