[Layout] Per page Layout?

[aress31]

Quick question, I built my website using a specific config/layout defined as follows in config/mui-layout.js:

export default {
  header: {
    config: {
      xs: {
        clipped: false,
        height: 'auto',
        position: 'sticky',
      },
    },
  },
  leftEdgeSidebar: {
    config: {
      xs: {
        variant: 'temporary',
        width: 256,
      },
      // TODO: Track https://github.com/siriwatknp/mui-treasury/issues/1156
      // eslint-disable-next-line
      sm: {
        collapsible: false,
        persistentBehavior: 'fit',
        variant: 'persistent',
        width: 256,
      },
    },
    hidden: ['md', 'lg', 'xl'],
  },
};

I then configure my layout application-wide in App.js as follows:

--- SNIP ---
export default () => {
  const location = useLocation();
  const routeResult = useRoutes(routeConfig);

  return (
    <Root scheme={muiLayout}>
      <CssBaseline />
      <Header variant='outlined'>
        <NavBar />
      </Header>
      <EdgeSidebar anchor='left'>
        <SidebarContent>
          <DrawerContent />
        </SidebarContent>
      </EdgeSidebar>
      <Content>
        <SnackbarProvider
          // TODO: Responsiveness
          // Track https://github.com/iamhosseindhv/notistack/issues/427
          // Track https://github.com/iamhosseindhv/notistack/issues/428
          // {...(useMediaQuery(
          //   (theme) => theme.breakpoints.up('xs'),
          //   { noSsr: true }
          // ) && { dense: false })}
          maxSnack={3}
        >
          <React.Suspense fallback={<LoadingSpinner />}>
            {/* Excludes pages with a hero */}
            {['/'].includes(location.pathname) ? (
              <>{routeResult}</>
            ) : (
              <StyledContainer maxWidth='lg'>
                {routeResult}
              </StyledContainer>
            )}
          </React.Suspense>
        </SnackbarProvider>
      </Content>
      <StyledFooter>
        <Container maxWidth='md'>
          <FooterContent />
        </Container>
      </StyledFooter>
    </Root>
  );
};

However, I am facing an issue as the layout needs to be different for pages/Blog.js, indeed, need to implement a Blog-oriented layout, as detailed in https://next.mui-treasury.com/?path=/story/layout-tutorials-blog--page. Is there an easy way to make one-time off changes to the layout for specific routes/pages?