如何使用样式组件覆盖.styl文件中的属性？

问题描述

我正在尝试自定义react-sidenav以适应网页的配色方案。可以通过使用样式组件修改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;
        }
    }
  }
`;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）