Как бы вы реализовали визуальную кастомизацию переиспользуемого компонента для разных проектов (разные цвета, стили)?

Для визуальной кастомизации переиспользуемого компонента в разных проектах можно использовать несколько подходов:

1. Пропсы для стилей и цветов — передавать в компонент параметры, отвечающие за цвета, размеры, отступы и т.п. Например, color, backgroundColor, fontSize.

2. Тема (Theme) через контекст — использовать контекст (например, React Context) для передачи темы с набором цветов и стилей, чтобы компоненты автоматически подхватывали нужные значения.

3. CSS-переменные (CSS Custom Properties) — задавать в корне темы CSS-переменные, которые переопределяются в разных проектах, а компоненты используют эти переменные в стилях.

4. Styled Components / CSS-in-JS — создавать стилизованные компоненты с возможностью переопределения стилей через пропсы или тему.

5. Классы и BEM — использовать классы с разными модификаторами для разных стилей, которые подключаются в зависимости от проекта.

Пример с React и styled-components:

import styled, { ThemeProvider } from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: ${props => props.theme.textColor};
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

const themeProjectA = {
  primaryColor: '#3498db',
  textColor: '#fff'
};

const themeProjectB = {
  primaryColor: '#e74c3c',
  textColor: '#000'
};

// В проекте A
<ThemeProvider theme={themeProjectA}>
  <Button>Click me</Button>
</ThemeProvider>

// В проекте B
<ThemeProvider theme={themeProjectB}>
  <Button>Click me</Button>
</ThemeProvider>

Такой подход позволяет легко менять визуальное оформление без изменения логики компонента.