根据prop更改nextjs - tailwind组件的颜色

Question

8 浏览2023年1月22日

匿名的 2023年1月22日

0 Comments

我正在使用nextjs和tailwindcss创建一个警报组件，用于显示一些信息。最终，我希望通过传递一个名为"alert_type"的属性给这个组件，并根据它来改变警报的颜色。（下面的示例尚未具备此功能）。在下面的示例中，我期望我的警报颜色是绿色的，但实际上它没有识别到颜色规范。我不明白为什么这不起作用...

export function Success({ title, children }: AlertProps) {
  const colour = 'green'
  return (
    
      
      
        {title}
      
      {children}
    
  )
}

0

1 答案

匿名的 · Answer 1 · 2023-06-30T22:53:28+00:00

问题原因：在使用tailwind组件时，必须返回完整的字符串，因为tailwind只解析完整的字符串。所以例如，如果你使用bg-${colour}-500，它会被替换为${first_var}，你需要定义const first_var = bg-green-500。接着，每次你都要创建一个新的变量，比如text-colour-700和text-colour-800，可以像下面这样定义：

const sec_var = 'text-green-700';
const third_var = 'text-green-800';

解决方法：确保在使用tailwind组件时返回完整的字符串，定义对应的变量，然后使用这些变量来设置颜色。