reactjs - 如何使用样式组件覆盖 .styl 文件中的属性?
问题描述
我正在尝试自定义react-sidenav以适应我网页的配色方案。可以通过使用 styled-components 修改 sidenav 组件的样式来自定义侧边栏。
我正在尝试覆盖以下 .styl 中元素的颜色
.sidenav-nav > .sidenav-navitem {
clear: both;
position: relative;
&.highlighted > .navitem {
cursor: default;
}
&:hover > .navitem::after {
background: #fff;
opacity: .15;
}
&.highlighted > .navitem::after,
&:hover.highlighted > .navitem::after {
background: #000;
opacity: .2;
}
&.highlighted.expanded > .navitem::after,
&:hover.highlighted.expanded > .navitem::after {
background: #000;
opacity: .25;
}
&.highlighted.selected.expanded > .navitem::after,
&:hover.highlighted.selected.expanded > .navitem::after {
background: #000;
opacity: .2;
}
&:hover > .navitem .navicon,
&.highlighted > .navitem .navicon {
opacity: 1;
}
&:hover > .navitem .navicon,
&:hover > .navitem .navtext,
&.highlighted > .navitem .navicon,
&.highlighted > .navitem .navtext {
color: #fff;
> * {
color: #fff;
}
}
> .navitem {
position: relative;
display: block;
line-height: 50px;
height: 50px;
white-space: nowrap;
text-decoration: none;
color: #fff;
font-size: 14px;
cursor: pointer;
&:focus {
outline: 0;
}
// Background layer
&::after {
content: '';
position: absolute;
width: 100%;
top: 0;
bottom: 0;
left: 0;
background: #fff;
opacity: 0;
z-index: -1;
}
}
> .navitem .navicon,
> .navitem .navtext {
color: #f9dcdd;
> * {
color: #f9dcdd;
}
}
> .navitem .navicon {
display: block;
float: left;
width: 64px;
height: 50px;
margin-right: -6px;
vertical-align: top;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
opacity: .7;
line-height: 50px;
text-align: center;
}
> .navitem .navicon + .navtext {
width: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0s .2s, opacity .2s linear;
}
}
具体这部分:
> .navitem .navicon,
> .navitem .navtext {
color: #f9dcdd;
> * {
color: #f9dcdd;
}
}
该文件由 NavItem 组件使用。在一个单独的文档中,我从 react-sidenav 包中导入 NavItem 并添加额外的样式,如下所示。此代码在 react-sidenav 存储库中的导航栏样式示例中提供:
const StyledNavItem = styled(NavItem)`
&&&:hover {
[class*="navtext--"] {
color: #222;
}
}
}
`;
我如何也可以使用不同的颜色来定位和覆盖颜色代码#f9dcdd?
编辑 1 我试过这个,但没有奏效:
const StyledNavItem = styled(NavItem)`
&&&:hover {
[class*="navtext--"] {
color: #222;
}
}
&&&> .navitem .navicon,
> .navitem .navtext {
color: #fff;
> * {
color: #fff;
}
}
}
`;
解决方案
推荐阅读
- flutter - 尝试运行应用程序颤动时找不到 AppLocalization 类
- c# - 如何重定向到 DLL 文件中存在的 Aspx 页面
- java - 使用 GridBagLayout 在一个面板中设置多个组件,但我不想填满整个面板
- authentication - 如何刷新令牌而不必再次通过身份验证?OAuth2
- python - 尝试在python中按位和两个列表
- javascript - 三元语句不返回正确的数据
- spring - CDI 注入:java.lang.Class 无法转换为 java.lang.reflect.ParameterizedType
- javascript - 如何在 React Native 中实现嵌套拖放?
- php - Laravel 中间件页面权限
- c# - 让 Assert 等待第一个计时器滴答声