Есть переиспользуемый UI-компонент, который используется в большом количестве мест в проекте. Дизайнер хочет немного изменить его внешний вид в одном конкретном месте. Как ты будешь действовать?

Введение

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

Основные подходы

• Пропсы и варианты: Добавить в компонент пропс, например variant или size, который меняет стили. Это самый чистый способ, если изменение укладывается в логику компонента.
• CSS-переменные: Использовать CSS-переменные для ключевых стилей, чтобы переопределять их в конкретном месте через класс-обёртку.
• Композиция: Создать новый компонент, который использует базовый внутри, и переопределить стили через класс или инлайн-стили.
• Переопределение через класс: Если компонент принимает className, можно добавить свой класс и перебить стили, но это хрупко и может сломаться при изменении внутренней структуры.

Практический пример

Допустим, есть кнопка Button с базовыми стилями. Нужно сделать её красной только в одном месте.

// Button.jsx
function Button({ variant = 'primary', className, ...props }) {
  return <button className={`btn btn-${variant} ${className}`} {...props} />;
}

// Использование в конкретном месте
<Button variant="danger">Удалить</Button>

// Или через CSS-переменные
<div className="special-context">
  <Button className="special-btn">Особый</Button>
</div>

/* CSS */
.special-context .special-btn {
  --btn-bg: red;
}

Вывод

Лучше всего сначала попробовать пропсы или CSS-переменные, так как они сохраняют предсказуемость. Если изменение уникально и не вписывается в дизайн-систему, используйте композицию. Избегайте глобальных переопределений, чтобы не создавать скрытые зависимости.