时间戳

首页 > 解决方案 > 如何在同一页面中为同一组件赋予两种不同的样式？

css - 如何在同一页面中为同一组件赋予两种不同的样式？

问题描述

我正在使用 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;
}

这些更改对设计没有影响:(

编辑二：

如果我向标签添加一个类，它对我不起作用:(相反，我丢失了自定义的字体大小。

在此处输入图像描述

代码：

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

标签： csstwitter-bootstrapbootstrap-4react-bootstrap

解决方案

您可以将新课程添加到您的第二个菜单。如果您添加.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 */
}

推荐阅读