在Emotion组件中传递Ref时提示‘Cannot find name 'ref'’如何解决？

你当前写法的问题 #

1. ref不是自定义props：ref是React的特殊属性，不需要在styled组件的泛型里声明{ ref: React.MutableRefObject<null> }，这么写会让React把它当成普通props处理，反而导致错误。
2. 样式定义阶段无法访问ref：你在styled的样式对象里直接用ref.current是行不通的——此时DOM元素还没创建，ref根本没绑定到任何元素上，自然找不到ref变量。

正确的实现步骤 #

1. 直接给Emotion组件传ref #

Emotion的styled组件默认支持ref转发，不用额外配置，直接传就行：

import styled from '@emotion/styled';
import { useRef, useEffect, useState } from 'react';

// 定义基础的styled组件，不用声明ref相关props
const Label = styled('p')`
  font-size: ${props => props.fontSize || '1rem'};
`;

export const NodeDisplayer = ({ data }) => {
  const sizeRef = useRef(null);
  // 用状态来控制动态样式
  const [fontSize, setFontSize] = useState('1rem');

  useEffect(() => {
    // 组件挂载后，ref已经绑定到DOM元素，此时可以读取DOM属性
    if (sizeRef.current) {
      // 举个例子：根据元素宽度调整字体大小
      const elementWidth = sizeRef.current.offsetWidth;
      setFontSize(`${elementWidth / 12}px`);
    }
  }, []);

  return (
    <>
      <Label ref={sizeRef} id="title" fontSize={fontSize}>
        {data?.content}
      </Label>
    </>
  );
};

2. 核心要点 #

• 别在styled的样式代码里直接用ref.current，样式是静态或基于props计算的，而ref是DOM实例化后的引用，两者时机不匹配。
• 如果需要基于DOM元素的信息调整样式，用useEffect（或useLayoutEffect）在组件挂载/更新后获取DOM数据，再通过状态把值传给styled组件的props，实现动态样式。
• Emotion会自动处理ref转发，所以给组件加ref属性就可以拿到对应的DOM元素，不用额外配置。

内容的提问来源于stack exchange，提问作者sir-haver