React中如何自动移除color: inherit属性解决styled组件链接样式失效问题

你遇到的样式失效本质是自定义的styled组件选择器权重低于覆盖在链接上的color: inherit规则，以下是三类可行方案：

方案1：提升样式优先级（最推荐，无需修改DOM属性） #

通过&&语法提升styled组件的选择器权重，即可覆盖优先级更低的color: inherit规则，修改后的组件代码如下：

export const NavLinks = styled(LinkS)`
    && {
        color: #fff;
        display: flex;
        align-items: center;
        text-decoration: none;
        padding: 0 1rem;
        height: 100%;
        cursor: pointer;

        &:hover {
            color: #01bf71;
            border-bottom: 3px solid #01bf71;
        }

        &.active {
            border-bottom: 3px solid #01bf71;
        }
    }
`;

如果还有冲突，可直接给color规则添加!important声明强制生效：color: #fff !important;，hover状态的color规则同理设置即可。

方案2：应用启动时自动移除color: inherit属性 #

如果需要完全移除该属性，可在根组件/导航组件挂载时通过DOM操作批量处理，在对应组件中加入以下代码：

import { useEffect } from 'react';

// 放在组件函数内部
useEffect(() => {
  // 选择器可替换为你实际的NavLinks对应类名
  document.querySelectorAll('.nav-links').forEach(linkEl => {
    linkEl.style.removeProperty('color');
  });
}, []);

方案3：全局CSS覆盖 #

也可以在全局样式文件中添加高优先级规则直接覆盖：

a.nav-links {
  color: #fff !important;
}
a.nav-links:hover {
  color: #01bf71 !important;
}

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