Styles partially disappear for any component wrapped by <SaasProvider> about saas-ui

[Pagebakers]

I had to remove the css imports as they contain css resets that interfere with Chakra UI it seems.

Code sandbox

[DevGJGlobal]

That makes sense! Thank you!

[Pagebakers]

Are you using the pages or app directory in Next.js 13? The app directory needs extra setup to make sure styles are working properly.

[DevGJGlobal]

I am using only pages.

Edit: As mentioned I also created a separate project with just NextJS 12, and in that case the components showed, but they had no styles.

[DevGJGlobal]

Has anyone had any luck looking at the repos I've shared. The error is quite easily reproducible on CodeSandbox and I've attached screenshots in the respective Readme's too.

[Pagebakers]

I'm unable to access the code sandboxes.

Can you try the following code? add height="$100vh" to AppShell.

export default function Home() {
  return (
    <AppShell
      height="$100vh"
      navbar={
        <Box as="header" borderBottomWidth="1px" py="2" px="4">
        </Box>
      }
      sidebar={
        <Sidebar>
          <SidebarSection>
            <NavItem>Home</NavItem>
            <NavItem>Settings</NavItem>
          </SidebarSection>
        </Sidebar>
      }
    >
      <Box as="main" flex="1" py="2" px="4" overflowY="auto">
        Your application content
      </Box>
    </AppShell>
  )
}

[DevGJGlobal]

@Pagebakers Thanks for following up!

I've updated the Codesandbox links - they should be accessible now.
You should be able to see screenshots describing the issue on both Codesandbox and the Github repos linked above.

Can you try the following code? add height="$100vh" to AppShell.

Yes that fixes the height but does not solve the issue of the default styles not being applied

Based on the documentation, I expect to see this:

But I see this:

Notes:

1. In both the repos the AppShell is commented out and at the bottom of the index.tsx (or index.js) file.
2. I've also added the NextJS 12 example to Github.

[Pagebakers]

That looks about right! Note that your theme probably renders in light mode by default, instead of the darkmode on the docs.

You can read more about how to setup dark/light mode here:
https://chakra-ui.com/docs/styled-system/color-mode

[DevGJGlobal]

I haven't had time to dig into the Chakra-UI color-mode yet, but do note this still doesn't solve the problem with NextJS 13 (which is what the linked repos and CodeSandbox are for), where the elements appear to have zero-size when using the AppShell template, and when using the default NextJS template, couple of the element/styles disappear (most of them are intact).