Why aren't my styled components applied on my components

I am trying to add some styling to my components using 'styled-components'. The problem is, they aren't applied.

I tried to put the styling in the same file.
I looked into the docs styling-normal-react-components.

Here's the code :

// this is the file containing the components that I want to style

import React from 'react';
import { NavLinkLi, NavLinkA } from '../styling/NavStyling';

export const NavLink = ({ destination, linkName }) => (

    <NavLinkLi>
        <NavLinkA href={destination}>
            {linkName}
        </NavLinkA>
    </NavLinkLi>

)

// this is the styling component

import styled from 'styled-components';

export const NavLinkLi = styled.li`
    width: 200px;
    height: 80px;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
`

export const NavLinkA = styled.a`
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    &:hover {
        background-color: #00008B;
        scale: 1.1;
    }
`

// this is the use case

import React from 'react';
import { NavLink } from '../nav-links/NavLink';

export const NavMenu = () => (

    <div>
        <NavLink
            destination = "/"
            linkName = "Home"
        />
        <NavLink
            destination = "/about-me"
            linkName = "About Me"
        />
    </div>

)

Solution

First of all, congratulations on your first contribution.

Regarding your question, as you used the next.js tag, on your question, I created a NextJS sandbox with the code you provided: https://codesandbox.io/s/young-smoke-h0mcn4

I am not seeing any issue at first glance so please check the sandbox and provide more details about what is wrong (screenshots or another sandbox with the reproducible issue will help).