Как использовать атрибут стиля в React

Допустим, вы в настоящее время используете весь потенциал попутного ветра, и, возможно, вы также использовали элементы попутного ветра и просто копируете и вставляете готовые компоненты. Я тоже так делаю большую часть времени, но бывают моменты, когда мы… не можем просто нажать CTRL+C и CTRL+V.

Познакомьтесь с атрибутом стиля, вы часто найдете его, особенно в попутном ветре, что в основном похоже на дополнительную настройку, необходимую для ваших компонентов, помимо встроенного стиля для className.

Обычно стиль используется для добавления background-color, background-image и т. д. Вы можете найти больше в официальной документации попутного ветра.https://tailwindcss.com/docs/background-attachment

Вот так это выглядит обычно.

Теперь, если мы просто скопируем и вставим код, он выдаст такую ​​ошибку.

Это требует дополнительной настройки стиля, которая, что неудивительно, также объяснено в документе реакции, но по какой-то причине, возможно, пропустила это, как и я.https://reactjs.org/docs/dom-elements.html#style

Итак, TLDR, мы не можем просто использовать hypen как background-color, нам нужно изменить его с camelCased на backgroundColor.

цвет фона в BackgroundColor,

background-position в backgroundPosition

фоновое изображение в фоновое изображение

и не только это, нам также нужно удалить кавычки, инкапсулирующие весь стиль, заменить их двойными фигурными скобками и поместить значение в кавычки, вот так.

Вот и все! Нам больше ничего не нужно делать. Теперь код будет работать отлично. Вот как это выглядит сейчас в моем проекте, просто скопировав и вставив код из элементов попутного ветра. (я действительно рекомендую это,https://tailwind-elements.com/)

Развлекайся! Спасибо за прочтение!