Ant Design Modal
Guys when i use the Ant Design Modal and put Ant Design inputs inside it , their CSS is messed up for some reason , but when i used the inputs normaly in pages they work fine. anyone have a guess on why that might happen?
8 Replies
Hi @Dada. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Wohooo @Dada, you just became a Waspeteer level 1!
----------------------
It seems like you're experiencing CSS issues with Ant Design components inside a Modal when using Wasp. While the knowledge sources don't specifically address Ant Design integration issues, there are a few potential causes based on similar CSS problems in Wasp:
1. CSS Loading Order: There might be a conflict in the order CSS is loaded. Similar issues have been observed with Tailwind and Auth UI in Wasp, where CSS loaded later overrides previous styles with the same specificity (Using AuthUI + Tailwind results in broken CSS).
2. CSS Framework Conflicts: Wasp has had known issues with CSS frameworks interactions. The Wasp team has previously reviewed their generated CSS to avoid interference with user styling solutions (Review generated CSS and make plan for it moving forward).
3. Development vs Production: One contributor noted that some CSS issues only appear during development with
wasp start but not in production builds (Using AuthUI + Tailwind results in broken CSS).
Possible solutions to try:
- Check if the issue persists in a production build
- Try adding more specific CSS selectors to override conflicting styles
- Ensure you're importing Ant Design styles correctly and in the right order
- Consider using inline styles for the problematic components inside the Modal
If these suggestions don't help, you might want to share a minimal reproducible example in the Wasp Discord community for more specific assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Dada, 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?I think you might have to wrap your page in an
<App> component?
https://ant.design/components/app
Test it out in your page, and, if it works, you can put the <App> in the top level for every page through the wasp file: https://wasp.sh/docs/project/client-config#setting-up-a-provider@Carlos apparently there is Main.css file path: app/src/client/Main.css
that file imports @tailwind base , which ovverrides css of all [type="text"] .
i tried importing @import 'antd/dist/reset.css'; after it , but it didn't work.
Tried it , it disabled most of tailwind css and didn't fix the Inputs problem.
i just removed the tailwind base import from the Main.css and im refactoring the design
Thank you for your help buddy :boi: