#reactjs #typescript #tailwind-css
Вопрос:
Я создал компонент 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-зеленый-100 «вместо». bg-зеленый-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'
/>
)
}
Я ценю любую помощь. Заранее спасибо.
Комментарии:
1. Разве это невозможно без использования этого пакета? Я чувствую, что в tailwind не так много предустановленных компонентов, как в пользовательском интерфейсе chakra, поэтому мне, возможно, придется использовать этот. Спасибо за ваше предложение.
2. Я понимаю. Но я попытался добавить их через имена классов, но все равно не получилось. Если вы или кто-нибудь другой, пожалуйста, помогите! <имя класса div={имена классов( ‘граница-t-4, округленная-b, px-4, py-3, тень-md, { bgColor }, { Цвет текста }, { Цвет границы } )} роль=’предупреждение’ >
3. Ух ты, наконец-то это сработало! Теперь я понял, как использовать этот пакет npm с именем класса. Огромное спасибо.
4. приятно это знать. Я превратил эти комментарии в реальный ответ, учитывая, что он перешел от «просто комментария» к «фактически помог вам ответить на вопрос».
Ответ №1:
Вероятно, вы захотите начать использовать пакет имен классов, чтобы вам было намного проще работать с условными классами, но основная проблема заключается в том, что вы включили .
в свои имена классов: они используются только в определениях классов/селекторах запросов, а не при назначении классов, поэтому:
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 }
И все должно работать просто отлично.