在React中如何获取Link组件的文本颜色值

你之前获取值为undefined有两个核心原因：

• ref初始化错误，且未等待组件挂载就访问DOM元素
• element.style.color只能读取元素行内style属性中定义的样式，无法读取CSS类、styled-components等外部定义的渲染后样式

具体实现步骤 #

步骤1：修正ref定义 #

将ref初始值设为null，同时指定正确的DOM元素类型（StyledLink渲染后为a标签，类型为HTMLAnchorElement）：

const textEl = useRef<HTMLAnchorElement>(null);

步骤2：在useEffect中读取计算样式 #

组件挂载完成后ref.current才会指向真实DOM，此时使用window.getComputedStyle获取浏览器实际渲染的最终颜色值，完整代码如下：

import { useRef, useEffect, useState } from 'react';

export function TextLink({ children, path, inline = false, dash = false }: TextLinkProps) {
  const textEl = useRef<HTMLAnchorElement>(null);
  const [linkColor, setLinkColor] = useState<string>('');

  useEffect(() => {
    if (!textEl.current) return;
    // 获取元素最终计算样式，覆盖所有样式来源
    const computedStyle = window.getComputedStyle(textEl.current);
    const currentColor = computedStyle.color;
    setLinkColor(currentColor);
    // 可直接在此处使用拿到的颜色值
    console.log('Link文本颜色：', currentColor);
  }, []);

  return (
    <StyledLink href={path} inline={inline} dash={dash} ref={textEl}>
      {children}
    </StyledLink>
  );
}

补充说明 #

• getComputedStyle返回的颜色值默认是rgb/rgba格式，若需要十六进制格式可自行做格式转换。
• 若使用SSR框架（如Next.js、Gatsby），需确保在客户端环境才调用window.getComputedStyle，避免服务端打包报错。
• 若仅需要在用户交互（如点击）时获取颜色，可直接在事件回调中访问ref.current读取样式，无需放在useEffect中。

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