为何styled-components样式未作用于我的React组件？

使用styled-components为React组件添加样式但样式未生效，已尝试将样式编写在同一文件，也查阅了官方文档的「styling-normal-react-components」章节，相关代码如下：

待样式化的组件文件 #

// 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>

)

排查与解决方法 #

• 确认依赖安装正确：确保已经安装styled-components，执行命令npm install styled-components或yarn add styled-components，检查package.json中是否有对应的依赖项。
• 检查导入路径：验证../styling/NavStyling的路径是否正确，注意文件名大小写、文件夹层级是否匹配，避免因路径错误导致样式组件未被正确导入。
• 排查样式覆盖问题：打开浏览器开发者工具，查看目标元素的样式面板，确认styled-components生成的类是否被其他全局样式或更高优先级的样式覆盖。可以临时给样式属性添加!important测试，或调整样式选择器的优先级。
• 版本兼容性检查：确认styled-components版本与React版本兼容，比如styled-components v6要求React 16.8及以上版本，若React版本过低，需升级React或降级styled-components到适配版本。
• SSR环境配置（若适用）：如果是服务器端渲染项目，需配置styled-components的SSR支持，比如使用ServerStyleSheet收集样式并在服务端注入，纯客户端项目可忽略此点。

内容的提问来源于stack exchange，提问作者Zain