// Button.jsx
import { overridable } from 'react-component-override';

export const Button = overridable(({ children, ...props }) => {
  return <button {...props}>{children}</button>;
});

// App.jsx
import {
  createOverrides,
  override,
  OverridesProvider
} from 'react-component-override';
import { Button } from './Button';

const OverridenButton = ({ children, ...props }) => {
  return (
    <Button {...props} style={{ background: '#b08eff' }}>
      {children}
    </Button>
  );
};

const overrides = createOverrides([override(Button, OverridenButton)]);

function App() {
  return (
    <OverridesProvider overrides={overrides}>
      <Button>It's actually OverridenButton component</Button>
    </OverridesProvider>
  );
}