在Next.js中传递函数型Prop时，如何使用twin.macro？

云原生阿岚

2026-8-22

问题解决：Icon未定义报错及twin.macro样式不生效问题

先解决最直接的语法错误

你的Sidebar.tsx代码里，<Icon tw={'h-6 w-6'} />后面多了一个英文句号（.），这会导致JSX语法解析失败，编译器无法正确识别Icon组件，这是触发“Icon is not defined”报错的直接原因，先把这个句号删掉。

处理twin.macro给自定义Icon组件加样式的问题

你的Icon是接收SVGProps的函数组件，twin.macro的tw属性默认只对原生HTML元素生效，直接给自定义组件传tw属性不会起作用，你可以用以下两种方案解决：

方案一：用twin.macro直接包装传入的Icon组件

import React from 'react';
import { Props } from './SidebarRow.i';
import tw from 'twin.macro';

function SidebarRow({ Icon, title }: Props) {
  // 用tw函数动态包装传入的Icon组件，添加样式
  const StyledIcon = tw(Icon)`h-6 w-6`;
  return (
    <div>
      <StyledIcon />
      <p>{title}</p>
    </div>
  );
}

export default SidebarRow;

方案二：通过style属性传递样式

因为Icon接收SVGProps，其中包含style属性，直接把twin生成的样式传给style即可：

import React from 'react';
import { Props } from './SidebarRow.i';
import tw from 'twin.macro';

function SidebarRow({ Icon, title }: Props) {
  return (
    <div>
      <Icon style={tw`h-6 w-6`} />
      <p>{title}</p>
    </div>
  );
}

export default SidebarRow;