Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

136
Visualizações
toast doesn't show correct style - nextjs

I'm using react-toastify.

_app.tsx:

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

...

  return (
    <AppStateProvider>
      <MainProvider>
      <HeaderProvider>
        <Component {...pageProps} />
        <ToastContainer
          position="top-right"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={true}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />
       </HeaderProvider>
       </MainProvider>
    </AppStateProvider>
  );
}

in my component:

toast.success( "success")

but it shows like this:

enter image description here

but at demo it shows:

enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Here goes my first answer on SO! Ran into a similar situation while trying out React-Toastify as well.

Basically you need to state the theme you want your toast to be.

e.g.

toast.success("success", {
  theme: "colored"
})

"colored" is the theme you are looking for

toast.success("success", {
  theme: "dark"
})

"dark" is also available.

If you don't provide any themes you get the result in the picture you uploaded in the question

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda