我可以在 React 中将 tailwind className 作为 props 传递吗？

Question

我制作了一个 MessageBanner 组件，想从中制作多个横幅，例如 MessageSuccess（绿色主题）和 MessageError（红色主题）。并且我尝试传递背景颜色、文本颜色和边框颜色的类名但没有成功。请帮忙

这是MessageBanner.tsx。

export const MessageBanner: VFC<Props> = memo(props => {
  const { title, description, bgColor, textColor, borderColor } = props
  return (
    <>
      <div
        className={`${bgColor} ${textColor} ${borderColor} pointer-events-autoborder-t-4 rounded-b  px-4 py-3 shadow-md duration-1000`}
        role='alert'
      >
        <div className='flex'>
          <div>
            <p className='font-bold'>{title}</p>
            <p className='text-sm'>{description}</p>
          </div>
        </div>
      </div>
    </>
  )
})

这是 MessageSuccess 组件。我试过不带'.'，比如 'bg-green-100' 而不是 '.bg-green-100' 但都没有成功。

export const MessageSuccess: VFC = () => {
  return (
    <MessageBanner
      title='Welcome Back'
      description='You have successfully logged in'
      bgColor='.bg-green-100'
      textColor='.green-900'
      borderColor='.border-green-500'
    />
  )
}

感谢任何帮助。提前致谢。

Answer 1

您可能希望开始使用 classnames 包，这样您就可以更轻松地使用条件 classes，但主要问题是您已经包含 .在你的 class 名称中：这些仅在 class 定义 /查询选择器中使用，而不是在你分配 classes 时使用，因此：

export const MessageSuccess: VFC = () => {
  return (
    <MessageBanner
      title='Welcome Back'
      description='You have successfully logged in'
      bgColor='bg-green-100'
      textColor='green-900'
      borderColor='border-green-500'
    />
  )
}

没有这三个属性的 .。然后，你可以这样做：

import { classnames } from "classnames";

const MessageBanner = (props) => {
  const classStr = classnames(
    "pointer-events-autoborder-t-4 rounded-b px-4 py-3 shadow-md duration-1000",
    props.bgColor,
    props.textColor,
    props.borderColor
  );
  return <div className={classStr} role="alert">{props.description}</div>
};

export { MessageBanner }

一切都应该会很好。

我可以在 React 中将 tailwind className 作为 props 传递吗？

Can I pass the tailwind className as props in React?

typescript

reactjs

tailwind-css