更改 nextjs 的颜色 - 基于 prop 的 tailwind 组件

Question

我正在使用 tailwindcss 在 nextjs 中创建一个警报组件来显示一些信息。最后，我想将一个道具“alert_type”传递给该组件，并基于此更改警报的颜色。（下面的例子还没有这个功能）。在下面的示例中，我希望警报的颜色为绿色，但是它没有选择颜色规范。我不明白为什么这不起作用...

export function Success({ title, children }: AlertProps) {
  const colour = 'green'
  return (
    <div className={`rounded-md p-4 bg-${colour}-50`}>
      <div className="flex">
        <div className="flex-shrink-0">
          <CheckCircleIcon
            className={'h-5 w-5' + ' text-' + colour + '-400'}
            aria-hidden="true"
          />
        </div>
        <div className="ml-3">
          <h3 className={'text-sm font-medium' + ' text-' + colour + '-800'}>
            {title}
          </h3>
          <div className={'mt-2 text-sm' + ' text-' + colour + '-700'}>
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

Answer 1

您必须 return 完整的字符串，因为 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';

更改 nextjs 的颜色 - 基于 prop 的 tailwind 组件

Change colour of nextjs - tailwind component based on prop

reactjs

next.js

tailwind-css