Как красиво и правильно сделать в компоненте кнопки её вариации?

Когда речь заходит о создании вариаций кнопки в React, существует несколько подходов, которые позволяют создать красивый и правильный код.

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

1. Использование CSS классов:
Один из подходов к созданию вариаций кнопки в React - это использование CSS классов. Вы можете создать различные классы для разных вариаций кнопки, которые определены в CSS-файле. Затем в компоненте кнопки можно динамически применить класс к кнопке в зависимости от выбранной вариации.

Пример:

   import React from 'react';
   import './Button.css';

   const Button = ({ text, variation }) => {
     return <button className={`button ${variation}`}>{text}</button>;
   };

   export default Button;

В CSS-файле вы можете определить различные классы для вариаций кнопки:

   .button {
     background-color: #f2f2f2;
     color: #000;
     font-size: 14px;
     padding: 10px 20px;
   }

   .button.primary {
     background-color: #007bff;
     color: #fff;
   }

   .button.secondary {
     background-color: #6c757d;
     color: #fff;
   }

В других компонентах вы можете использовать кнопку следующим образом:

   import React from 'react';
   import Button from './Button';

   const App = () => {
     return (
       <>
         <Button text="Primary Button" variation="primary" />
         <Button text="Secondary Button" variation="secondary" />
       </>
     );
   };

   export default App;

2. Использование пропсов:
Еще одним подходом к созданию вариаций кнопки в React является использование пропсов. Вы можете передать пропс в компонент кнопки, который будет указывать на выбранную вариацию кнопки. Затем внутри компонента вы можете использовать условные операторы для применения стилей и свойств в зависимости от выбранной вариации.

Пример:

   import React from 'react';

   const Button = ({ text, variation }) => {
     let buttonStyle = {
       backgroundColor: '#f2f2f2',
       color: '#000',
       fontSize: '14px',
       padding: '10px 20px',
     };

     if (variation === 'primary') {
       buttonStyle.backgroundColor = '#007bff';
       buttonStyle.color = '#fff';
     } else if (variation === 'secondary') {
       buttonStyle.backgroundColor = '#6c757d';
       buttonStyle.color = '#fff';
     }

     return (
       <button style={buttonStyle}>
         {text}
       </button>
     );
   };

   export default Button;

В других компонентах вы можете использовать кнопку следующим образом:

   import React from 'react';
   import Button from './Button';

   const App = () => {
     return (
       <>
         <Button text="Primary Button" variation="primary" />
         <Button text="Secondary Button" variation="secondary" />
       </>
     );
   };

   export default App;

Оба этих подхода позволяют создавать красивые и правильные вариации кнопок в React. Выбор между ними зависит от ваших предпочтений и требований проекта.