Как создать компонент, пропс которого будет сразу попадать в пропсы всех внутрилежащих компонентнов?

camelCaseVlad, неправильно сформировал вопрос, имелось ввиду как реализовать такой компонент, похожий на ThemeProvider из styled-components

Как создать компонент, пропс которого будет сразу попадать в пропсы всех внутрилежащих компонентнов?

camelCaseVlad,

<ThemeProvider theme={theme}>
      <AppBox>
        <Container>
          <Switch>
            <Route path="/main" component={MainPage} />
            <Route exact path="/card" component={CardPage} />
            <Route exact path="/cabinet" component={CabinetPage} />
            <Redirect from="/" to="/main" />
          </Switch>
        </Container>
      </AppBox>
    </ThemeProvider>

Попробуйте понять, что я вам в первую очередь говорю не о внутренней реализации, а о том как этим в итоге можно пользоваться. Вот тут я получаю доступ к теме из любого места. И я сам лично не использую при этом ни единого консюмера. Как там это все работает внутри меня как пользователя пакета это мало должно волновать.

Как создать компонент, пропс которого будет сразу попадать в пропсы всех внутрилежащих компонентнов?

camelCaseVlad, скорее всего они и обернуты, но нам ведь как пользователям не приходится делать это руками. Мне нужно реализовать точно такой же функционал

Как создать компонент, пропс которого будет сразу попадать в пропсы всех внутрилежащих компонентнов?

camelCaseVlad,проблема в том, что мне не нужно менять компонент в зависимости от темы и рендерить его. Мне нужно прокидывать пропс глубоко вниз без лишних действий. В styled-component мы ведь руками не оборачиваем каждый компонент в консюмер чтобы потом использовать тему в разных местах.
Нужен один провайдер, в который можно обернуть компонент и передать пропс всем потомкам любого уровня вложенности.

Как создать компонент, пропс которого будет сразу попадать в пропсы всех внутрилежащих компонентнов?

camelCaseVlad,

function App() {
  return (
    <ThemeProvider theme="light">
      <MyComponent>
        <MyComponent1>
          <SubComponent1>
            <Button1 />
          </SubComponent1>
        </MyComponent1>
        <MyComponent2>
          <SubComponent2>
            <Button2 />
          </SubComponent2>
        </MyComponent2>
        <MyComponent3>
          <SubComponent3>
            <Button3 />
          </SubComponent3>
        </MyComponent3>
      </MyComponent>
    </ThemeProvider>
  );
}

Если я оберну только MyComponent, то пропс theme будет автоматом доступен во всех низлежащих компонентах?

Как создать компонент, пропс которого будет сразу попадать в пропсы всех внутрилежащих компонентнов?

camelCaseVlad, так я хочу чтобы оборачивание моих компонентов в консюмер было скрыто, и не совсем догоняю как реализовать это

Как сделать модальное окно на html?

как такое окно закрыть?