Недавно, работая над веб-сайтом, я обнаружил, что мне нужно создать компонент кнопки, чтобы упростить рабочий процесс (поскольку нужно было добавить довольно много кнопок).
Однако после проб и ошибок, а также поиска по форумам и блогам я решил поискать другое решение моей проблемы.
Это решение было со стилизованными компонентами, и оно было довольно простым. Мне нужен был только реквизит!
Так что это заставило меня задуматься: могу ли я также использовать props для создания компонента кнопки с помощью Tailwind CSS? Это мое решение:
Шаг первый: создайте приложение React вместе с TailwindCSS
С нпм:
npx create-react-app my-project cd my-project npm install -D tailwindcss npx tailwindcss init
С пряжей:
yarn create react-app react-tailwind-css-stater yarn add -D tailwindcss postcss autoprefixer yarn tailwindcss init -p
В свой глобальный файл CSS добавьте следующее:
@tailwind base; @tailwind components; @tailwind utilities
После того, как вы это сделаете, вы должны настроить файл tailwind.config.js
и запустить сервер разработки с помощью npm start
или yarn run dev
.
На всякий случай, если вам нужно настроить собственные цвета в файле tailwind.config.js
, сейчас самое время это сделать. Вот как выглядит мой.
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { colors: { 'darkBlue': '#151421', 'whiteBG': '#FFFFFF', }, }, }, plugins: [], }
Затем создайте компонент кнопки в папке с именем components
. Я назову свою Button
//inside Button.js const Button = () => { return ( <button></button> ) }; export default Button;
Теперь самое интересное: мы передаем props
компоненту, который поможет нам настроить каждую кнопку по своему вкусу.
const Button = ({bg, btnText, textColor}) => { return ( <button></button> ) }; export default Button;
Теперь мы добавили 3 реквизита к компоненту. bg
для фона кнопки, btnText
для текста и textColor
для цвета текста. Теперь давайте посмотрим, как реализовать это в наших служебных классах Tailwind.
const Button = ({bg, btnText, textColor}) => { return ( <button className={`bg-${bg} py-4 px-7 text-${textColor}`}>{btnText}</button> ) }; export default Button;
Как видно здесь, мы использовали обратные кавычки вместо кавычек, чтобы мы могли использовать наши значения свойств. Затем мы импортируем наш компонент Button
в любой файл .js
, в котором мы хотим, чтобы компонент отображался, и используем созданные нами реквизиты. Я назвал свой App.js
//import button component in App.js import Button from "./components/Button"; const App = () => { return ( <Button bg={'darkBlue'} btnText={'Follow me'} textColor={'whiteBG'}></Button> //could also be written as <Button bg={'darkBlue'} btnText={'Follow me'} textColor={'whiteBG'}/> //remember I added custom colors in my tailwind config file, so you color names may differ ) }
В приведенном выше примере мы использовали реквизит соответствующим образом. Обратите внимание, что в App.js
компонент Button может быть написан двумя способами: с открывающими и закрывающими тегами и с самозакрывающимися тегами.
Теперь у меня есть много вариантов кнопок в зависимости от цвета и текстового содержимого в зависимости от того, сколько требуется для моего проекта.
Если вы нашли этот пост полезным, пожалуйста, поделитесь им с другом, а также подпишитесь на меня.
Спасибо за прочтение :)