reactjs - ¿Puedo pasar la clase de Tailwind como props en React?

Hice un componente MessageBanner y quiero hacer múltiples banners como MessageSuccess (tema verde) y MessageError (tema rojo) a partir de él. Y traté de pasar los classNames de color de fondo, color de texto y color de borde, pero no tuve éxito. Por favor, ayúdame.

Este es el 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>
    </>
  )
})

Este es el componente MessageSuccess. Intenté sin ' . ', como 'bg-green-100' en lugar de '.bg-green-100', pero ninguno funcionó.

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'
    />
  )
}

Agradezco cualquier ayuda. Gracias de antemano.

Respuesta #1

Probablemente querrás comenzar a usar el paquete classnames para que puedas trabajar con clases condicionales mucho más fácilmente, pero el problema principal es que has incluido . en tus nombres de clase: esos solo se usan en las definiciones/selectores de clase, no cuando asignas clases, así que:

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'
    />
  )
}

sin el . para esos tres atributos. Luego, puedes hacer:

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 }

Y las cosas deberían funcionar bien.