Login

login.tsx

// 1. Переопределение через Провайдер зависимостей
const rootDeps = createDepsRegistry([ Input, Button ]);
const loginDeps = createDepsRegistry([ SupperButton ]);

<DepsProvider value={rootDeps}>
  <div data-id="app">
    <Informer/> {/* все кнопки в «Информере» в будут Button */}
    
    <DepsProvider value={loginDeps}>
      <div data-id="login">
        <Login/> {/* все кнопки будут SupperButton 🎉 */}
      </div>
    </DepsProvider>
    
  </div>
</DepsProvider>


// 2. Точечная перегрузка без дополнительных контекстов/провайдеров
const loginDepsOverrides = createDepsOverride(
  $Button,
  [ $Login ], // специфичный путь, где находится кнопка
)(SupperButton);
const rootDeps = createDepsRegistry([ Input, Button ], [ loginDepsOverrides ]);

<DepsProvider value={rootDeps}>
  <div data-id="app">
    <Informer/> {/* все кнопки в «Информере» в будут Button */}
    
    <div data-id="login">
      <Login/> {/* все кнопки будут SupperButton 👍 */}
    </div>
    
  </div>
</DepsProvider>


// 3. Точечная перегрузка конкретного компонента без дополнительных контекстов/провайдеров
const loginDepsOverrides = createDepsOverride(
  $Button,
  [ $Login ],
  (props) => props.kind === "primary",
)(SupperButton);
const rootDeps = createDepsRegistry([ Input, Button ], [ loginDepsOverrides ]);

<DepsProvider value={rootDeps}>
  <div data-id="app">
    <Informer/> {/* все кнопки в «Информере» в будут Button */}
    
    <div data-id="login">
      <Login/> {/* Только "primary" будет SupperButton 🎯 */}
    </div>
    
  </div>
</DepsProvider>