Html 设置className并使用styledComponents创建操作

为什么这不起作用？ 我想为导航栏中的导航选项卡提供不同的背景色。 稍后，当我选择它时，活动选项卡应显示为红色背景。 就像我们知道不同的导航菜单一样

<NavigationLinkContainer className={"active"} onClick={() => { window.location.href = "/" }}>
const NavigationLinkContainer = styled.div`
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
    margin: 0px;
    cursor: pointer;
    height: 50px;


    .active {
        background-color: #D1495B; 

    }

    /* &:hover {
        background-color: ${colors.softRed};
    } */
    &:hover {
        color: ${colors.white};
        background: ${colors.softRed};


        &:before {
            height: 100%;
            transition: 0.3s ease-in-out;
        }
    }


    @media (max-width: 1000) {
        padding: 15px;
        border-bottom: 4px solid transparent;

        &:hover {
            background-color: azure;
        }

        &:active, &:hover {
            color: azure;
            border-bottom: 4px solid azure;
        }

        &:before {
            display: none;
        }
    }


`

{window.location.href=“/”}}>
const NavigationLinkContainer=styled.div`
显示器：flex；
柔性流：行；
对齐项目：居中；
框大小：边框框；
过渡：0.3s缓进缓出；
边际：0px；
光标：指针；
高度：50px；
.主动{
背景色：#D1495B；
}
/*&：悬停{
背景色：${colors.softRed}；
} */
&：悬停{
颜色：${colors.white}；
背景：${colors.softRed}；
&：之前{
身高：100%；
过渡：0.3s缓进缓出；
}
}
@介质（最大宽度：1000）{
填充：15px；
边框底部：4px实心透明；
&：悬停{
背景颜色：天蓝；
}
&：活动，&：悬停{
颜色：蓝色；
边框底部：4倍固体蓝色；
}
&：之前{
显示：无；
}
}
`

您没有为活动类使用正确的选择器。添加父选择器

&

以在组件具有

活动类时应用样式

const NavigationLinkContainer = styled.div`
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
    margin: 0px;
    cursor: pointer;
    height: 50px;

    // use the parent selector &
    &.active {
        background-color: #D1495B; 
    }

   .
   .
   .
   . 

`

希望这有帮助