Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Toast] Toast does not appear to have any styles

See original GitHub issue

Describe the bug When using useToast, none of the default styles are applied. In fact, there is no toast.ts file in the @chakra-ui/theme package at all.

Expected Behavior I should have the toast look like a toast on the website

Link to minimal reproduction https://codesandbox.io/s/funny-snyder-bm1r9?fontsize=14&hidenavigation=1&theme=dark

Steps to Reproduce: See reproduction above.

Suggested solution(s) Add some default styles

Desktop (please complete the following information):

OS: Mac OS 10.15.5
Browser: Chrome 83

Additional context Screen Shot 2020-06-29 at 12 09 31 PM

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:9 (9 by maintainers)

Top GitHub Comments

2reactions

segunadebayocommented, Jun 29, 2020

Here’s an adjusted version: https://codesandbox.io/s/heuristic-brown-b51fb?file=/src/App.tsx

2reactions

segunadebayocommented, Jun 29, 2020

Hi @cereallarceny,

The useToast hook needs access to the theme in ChakraProvider. The way you set this up, useToast is above the provider that’s why you can’t see any styles.

To fix this, move the ChakraProvider and CSSReset to the index.js file.

PS: The reason there’s no toast.ts is that Toast re-uses the styles from the alert theme.