How would you implement visual customization of a reusable component for different projects (different colors, styles)?

For visual customization of a reusable component across different projects, several approaches can be used:

1. Props for styles and colors — passing parameters to the component that control colors, sizes, margins, etc. For example, color, backgroundColor, fontSize.

2. Theme via context — using context (e.g., React Context) to pass a theme with a set of colors and styles, so components automatically adopt the necessary values.

3. CSS variables (CSS Custom Properties) — defining CSS variables at the root of the theme, which are overridden in different projects, and components use these variables in styles.

4. Styled Components / CSS-in-JS — creating styled components with the ability to override styles via props or theme.

5. Classes and BEM — using classes with different modifiers for various styles, which are applied depending on the project.

Example with React and 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'
};

// In project A
<ThemeProvider theme={themeProjectA}>
  <Button>Click me</Button>
</ThemeProvider>

// In project B
<ThemeProvider theme={themeProjectB}>
  <Button>Click me</Button>
</ThemeProvider>

This approach makes it easy to change the visual style without modifying the component's logic.