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

【问题标题】：Can I pass the tailwind className as props in React?我可以将顺风类名作为 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 变成了一个实际的答案，因为它从“只是一个评论”变成了“实际上帮助你回答这个问题”。

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 }