Как стилизовать компонент React с помощью TailwindCSS - PullRequest
Новая
       26

Как стилизовать компонент React с помощью TailwindCSS

0 голосов
/ 27 апреля 2020

Я использую Tailwind CSS в проекте React. Я могу стилизовать обычные HTML элементы, передавая служебные классы Tailwind CSS в атрибуте className, но это не работает, когда я передаю служебные классы внутри атрибута className компонентов, например: 

<Dropdown className="hidden sm:block sm:ml-6"/>

Dropdown - это компонент React, импортированный в другой компонент.

Как мне заставить эту работу работать?

1 Ответ

2 голосов
/ 27 апреля 2020

если <Dropdown/> - ваш пользовательский компонент, который вы, вероятно, забыли включить в div в определении вашего компонента,

вы можете переименовать "className" в customclass и применить его в определении вашего компонента.

, поэтому ваш код будет выглядеть как 

<Dropdown customclasses="hidden sm:block sm:ml-6"/>

и определение вашего компонента 

const Dropdown = ({ customclasses, ...otherProps }) => <div className={customclasses}></div>

или если вы не хотите изменять className, вы можете распространять ...otherProps прямо на div

const Dropdown = ({ yourprop, yourprop , ...otherProps }) => <div {...otherProps}></div>
...