为什么这不起作用呢？ 我想给导航栏中的导航选项卡一个不同的背景颜色。 稍后，当我选择它时，active选项卡将显示为红色背景。 就像我们知道的不同导航菜单一样。

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


`