Блог

Главная - Вопросы по программированию - Могу ли я передать имя класса tailwind в качестве реквизита в React?

Могу ли я передать имя класса tailwind в качестве реквизита в React?

#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 }

И все должно работать просто отлично.

Метки: