Wasp•2w ago

Chakra UI V3 styles not being applied in wasp app

I've migrated to chakra ui v3, but I am not getting any styles correctly appearing as they are in the chakra demo. I've applied all the migration instructions, and wrapped my app in a provider (in app.tsx)

'use client';

import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  );
}

'use client';

import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  );
}

This is my provider file, which I call in app.tsx as follows: ``` <Provider> <div className='min-h-screen dark:text-white dark:bg-boxdark-2'> {isAdminDashboard ? ( <> <Outlet /> </> ) : ( <> {shouldDisplayAppNavBar && <AppNavBar />} <div className='mx-auto sm:px-6 lg:px-8'> <Outlet /> </div> </> )} </div> </Provider>

22 Replies

kapa.ai•2w ago

Hi @CamBlackwood. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain specific information about Chakra UI v3 or issues with Chakra UI v3 styles not being applied in a Wasp app. However, I can confirm that Wasp supports wrapping your app in a provider (such as ChakraProvider) by specifying a custom root component in your Wasp project configuration. This is typically done by setting the rootComponent in your main.wasp file and ensuring your provider renders its children, as shown in the Wasp documentation:

// src/Root.jsx or src/Root.tsx
import { ChakraProvider } from '@chakra-ui/react';

export default function Root({ children }) {
  return (
    <ChakraProvider>
      {children}
    </ChakraProvider>
  );
}

// src/Root.jsx or src/Root.tsx
import { ChakraProvider } from '@chakra-ui/react';

export default function Root({ children }) {
  return (
    <ChakraProvider>
      {children}
    </ChakraProvider>
  );
}

And in your main.wasp:

app MyApp {
  title: "My app",
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

app MyApp {
  title: "My app",
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

This approach is confirmed to work for Chakra UI in general, as discussed in the community and documentation, but there is no explicit mention of Chakra UI v3 or any migration-specific issues in the provided sources. If you are following this pattern and still experiencing issues, the problem may be related to Chakra UI v3 itself or to the migration process, which is not covered in the Wasp documentation or community discussions available here. You may want to double-check your Chakra UI v3 setup and ensure all required styles and providers are correctly configured in your Wasp app as per the official Chakra UI migration guide and documentation. For more on setting up providers in Wasp, see the official documentation. If you need further help, providing more details or checking with the Chakra UI community may be beneficial. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @CamBlackwood, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

CamBlackwoodOP•2w ago

@kapa.ai Yeah, that's the approach I've taken unfortunately and it does not work. I'll do some more research

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying. Based on the knowledge sources provided, there is no explicit information about Chakra UI v3 or troubleshooting its styles not being applied in a Wasp app. The documentation and community discussions confirm that wrapping your app in a provider using the rootComponent approach in Wasp is the recommended method for integrating UI libraries like Chakra UI, and this has worked for others with previous versions of Chakra UI. However, there are no details or solutions specific to Chakra UI v3 or its migration process in the sources available. If the documented approach is not working for you, the knowledge sources do not contain enough information to provide a solution specific to Chakra UI v3 integration issues. You may need to consult Chakra UI's own documentation or community for migration-specific troubleshooting, or wait for further updates from the Wasp community regarding Chakra UI v3 support. If you discover a solution, sharing it with the Wasp community could help others facing the same issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @CamBlackwood, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•6d ago

Hey Cam, nice to see you again! Stil need help with this?

CamBlackwoodOP•6d ago

Yes please! Can’t work out if it’s a wasp or a chakra issue - I had chakra v2 working already but v3 isn’t

Filip•6d ago

I'll tag @miho here. He might be able to help out

miho•6d ago

Let me try Chakra v3 with Wasp real quick

miho•6d ago

Here's a snippet of what worked for me: https://gist.github.com/infomiho/1bd4aced56541a1ca416c7335a4bbc4c I had to add @ts-ignore in couple of place because Wasp and Chakra v3 have some incompatibilities in tsconfig.json setup.

Gist

Wasp + Chakra v3

Wasp + Chakra v3. GitHub Gist: instantly share code, notes, and snippets.

CamBlackwoodOP•6d ago

thanks guys - @miho I'll give that a crack tonight and let you know how I get on 🙂 @miho when you get the chance can you send me a screenshot of what the Button component looks like for you? Mine still looks unstyled after copying the details from the gist, thanks!

CamBlackwoodOP•6d ago

mine, for reference

miho•6d ago

It was the screenshot I sent above 🙂 If you want, please share the repo with me on Github and I'll try seeing if I can figure out what's wrong 🙂

CamBlackwoodOP•6d ago

How did I miss that 🤦‍♂️ Thank you, I’ll invite you to it later this evening just sent you an invite @miho - the branch name is chakra-fix - there's a few unrelated changes in there too, just a heads up

toticozeni•6d ago

FYI Miho is currently at conference till Sunday, so he may be a bit slower on this.

miho•6d ago

It seems that Chakra v3 doesn't work well with Tailwind, look at the button when I don't enable Tailwind in your project. The trouble is that Tailwind styles get loaded second and then they override the Chakra styles. I haven't found a recommended way of using Tailwind with Chakra v3.

toticozeni•6d ago

I retract my statement

miho•6d ago

We are traveling tomorrow morning 🙂 thanks for looking out for us

toticozeni•6d ago

Oh forgot it's not today yet

CamBlackwoodOP•6d ago

Ahh, that makes sense, thanks @miho - I think I will maybe drop chakra in that case, or just style the base components manually if I need to. Enjoy the conference!

miho•6d ago

You could try this as one extra step, but it might mess up the rest of Tailwind styled components https://v3.tailwindcss.com/docs/preflight#disabling-preflight

Preflight - Tailwind CSS

An opinionated set of base styles for Tailwind projects.

CamBlackwoodOP•6d ago

I will give that a look, thank you 🙂 @miho this seems like a good solution, thanks - I've been checking for side effects everywhere and it doesn't seem to have any. Thanks for your help!

miho•6d ago

Good to know, thank you for the feedback 🙂 could you pls comment on the gist I shared

CamBlackwoodOP•6d ago

will do now

Gaming

Programming

Chakra UI V3 styles not being applied in wasp app

Did you find this page helpful?