我正在使用 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;
}
最佳答案
您可以将新类添加到您的第二个菜单中。如果添加 .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 */
}
关于css - 如何为同一页面中的同一组件提供两种不同的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54907760/