我可以将顺风类名作为 React 中的道具传递吗？

Posted 2023-03-07

【中文标题】我可以将顺风类名作为 React 中的道具传递吗？

【英文标题】：Can I pass the tailwind className as props in React?

【发布时间】：2021-11-01 06:14:54

【问题描述】：

我制作了一个 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'
    />
  )

感谢您的帮助。提前致谢。

【问题讨论】：

不使用这个包是不可能的吗？我觉得顺风没有像 chakra UI 那样有很多预设组件，所以我可能需要使用这个。感谢您的建议。

我明白了。但是我尝试通过类名添加它们但仍然无法正常工作。如果你或任何人，请帮助！

哇，终于成功了！我现在明白了如何使用这个类名 npm 包。非常感谢。

很高兴知道。我已经把这些 cmets 变成了一个实际的答案，因为它从“只是一个评论”变成了“实际上帮助你回答这个问题”。

【参考方案1】：

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

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 

一切都应该很好。

【讨论】：

不要忘记在 classname 导入中用分号替换冒号

已修复，谢谢告知。