// утилита для формирования класса, можно использовать любой аналог
import cx from 'classnames';
// добавили новый проп — mix
const Button = ({ children, mix }) => {
  return (
    <button
      className={cx("my-button", mix)}
    >
      {children}
    </button>
}

import cx from 'classnames';
import b from 'b_';
const Button = ({ children, mix, theme }) => (
  <button
    className={cx(
     b("my-button", { theme }), mix)}
  >
    {children}
  </button>
)

const withTheme1 = (Button) =>
(props) => {
    return (
        <Button
            {...props}
            styles={theme1Styles}
        />
    )
}
const Theme1Button = withTheme1(Button);

import "./styles.css";
// Базовый компонент кнопки. Принимает содержимое кнопки и стили
const ButtonBase = ({ style, children }) => {
console.log("styl123e", style);
return <button style={style}>{children}</button>;
};
const withTheme1 = (Button) => (props) => {
// HOC применяет стили, только если выбрана тема "theme1"
if (props.theme === "theme1") {
   return <Button {...props} style={{ color: "red" }} />;
}
return <Button {...props} />;
};
const withTheme2 = (Button) => (props) => {
// HOC применяет стили, только если выбрана тема "theme2"
if (props.theme === "theme2") {
   return <Button {...props} style={{ color: "green" }} />;
}
return <Button {...props} />;
};
// ф-я для оборачивания компонента в несколько HOC
const compose = (...hocs) => (BaseComponent) =>
hocs.reduce((Component, nextHOC) => nextHOC(Component), BaseComponent);
// собираем кнопку, передав нужный набор тем
const Button = compose(withTheme1, withTheme2)(ButtonBase);
export default function App() {
return (
   <div className="App">
     <Button theme="theme1">"Red"</Button>
     <Button theme="theme2">"Green"</Button>
   </div>
);
}

<Select
  ...
  overrides={{
    Field: {
      props: {theme: 'dark'}
    },
    Icon: {
      props: {size: 'big'},
    },
    Menu: {
      style: {backgroundColor: '#CCCCCC'}
    },
  }}
/>

import InputField from './InputField';
import Icon from './Icon';
import Menu from './Menu';
import Option from './Option';

// теперь вместо прямого импорта Select принимает одним из параметров компонент меню
const Select = ({
  Menu: React.ComponentType<IMenu>
}) => {
  return (
    ...
    <Menu>
      ...
    </Menu>
    ...
  )
...
}

import { compose } from '@bem-react/core'
import { withRegistry, Registry } from '@bem-react/di'
const selectRegistry = new Registry({ id: cnSelect() })
...
selectRegistry.fill({
    'Trigger': Button,
    'Popup': Popup,
    'Menu': Menu,
    'Icon': Icon,
})
const Select = compose(
    ...
    withRegistry(selectRegistry),
)(SelectDesktop)

const Component = () => {
   /*
      К сожалению, использование хуков приводит к тому, что компонент много знает о своем окружении.
      Например, тут он знает о наличии стора и его внутренней структуре.
      При переносе в другой проект, где стор отсутствует, код может сломаться.
   */
   const {userName} = useStore();
   // Тут компонент знает о куках, что не очень хорошо для переиспользования (может сломаться, если в другом проекте это не так).
   const userToken = getFromCookie();
   // Аналогично — доступ к window может стать проблемой при переиспользовании компонента.
   const {taskList} = window.ssrData;
   const handleTaskUpdate = () => {
       // Компонент знает об API сервера. Это допустимо только для верхнеуровневых компонентов.
       fetch(...)
   }
   return <div>{'...'}</div>;
  };
/*
   Здесь компонент принимает только необходимый ему набор данных.
   Его можно легко переиспользовать, потому что только верхнеуровневые компоненты будут знать все детали.
*/
const Component2 = ({
   userName, userToken, onTaskUpdate
}) => {
   return <div>{'...'}</div>;
};