Why aren't my styled components applied on my components-CodePudding

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>

)

CodePudding user response：

After messing around a bit trying to figure it out, I saw that I needed a _document.jsx file (https://nextjs.org/docs/messages/react-hydration-error). Seems to be the answer here. The rendering is looking fine even after reloads/navigating to other links. Thank you for your help.

CodePudding user response：

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).