Как мне дать ответному маршрутизатору Outlet имя класса?

Компонент <Outlet /> React Router Dom не имеет реквизита className. Если вы хотите применить к компоненту стиль, который в конечном итоге заменит заполнитель компонента Outlet, вам следует обернуть Outlet элементом HTML и передать свой реквизит className или style элементу HTML, а затем передать соответствующий класс, который применяется margin-top к этому.

<main className = "mt-10">
   <Outlet />
</main>

У меня есть заголовок, выход и нижний колонтитул. Я хочу дать Outlet имя класса, чтобы каждый компонент получал верхний край. Есть ли способ для этого или мне нужно создать компонент-оболочку, окружающую Выход?

Сам компонент Outlet не является каким-либо компонентом или элементом HTML, который принимает свойство className и не отображается визуально на экране. По сути, это невидимый контейнер для вложенных маршрутов, в котором отображается их element-контент.

См. Аутлет: Единственный доступный реквизит — это тот context реквизит, который он может предоставить.

interface OutletProps {
  context?: unknown;
}
declare function Outlet(
  props: OutletProps
): React.ReactElement | null;

Любой стиль пользовательского интерфейса, который вы хотите применить, должен быть реализован в компоненте маршрута макета, отображающем Outlet. Да, вам нужно будет обернуть Outlet во что-нибудь стильное.

Тривиальный пример:

const AppLayout = () => (
  <div>
    <Header />
    <div style = {{ marginTop: "2rem" }}>
      <Outlet />
    </div>
    <Footer />
  </div>
);

<Routes>
  <Route element = {<AppLayout />}>
    {/* Routes with header, footer, and margin-top applied */}
  </Route>
  {/* Route without header, footer, and no margin-top */}
</Routes>