Search code examples
javascriptreactjsreact-routerclassname

How do I give react router Outlet a className?

I'm using react with react router for the client-side routing. I have a header, outlet, and footer. What I want is to give the Outlet a classname so that every component get's a margin-top. Is there a way to do this or do I have to make a wrapper component surrounding the Outlet?

Solution

  • The <Outlet /> component of the React Router Dom does not have a className prop. If you want to apply a style to the component that would eventually replace the Outlet component placeholder, then you should wrap the Outlet with an HTML element and pass your className or style prop to the HTML element and subsequently pass in the appropriate class that applies margin-top to it.

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