Estoy tratando de agregar un estilo personalizado en reaccionar tostador, primero tengo que importar estos
import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';que llamar al brindis de reacción:
const handleToast = () => { toast("sent mail") }Aquí agrego css en el contenedor de tostadas:
<div> <ToastContainer toastStyle={{ marginTop: "4rem", borderRadius: "20px", backgroundColor: "red" }} /> <button onClick={handleToast} className='btn btn-info'>Click here</button> </div >Pero en el componente CSS de ToastContainer no funciona. Gracias por adelantado
Puede intentar agregar los estilos a un archivo CSS raíz/global. Los nombres de clase que usaría serían principalmente: .Toastify .Toastify__toast-container .Toastify__progress-bar .Toastify__toast .Toastify__toast-body
No me queda claro tu problema. Creo que quieres diseñar el brindis en sí. Si es así, puede hacerlo fácilmente agregando clases como esta,
toast("Sent mail",{ className: 'black-background', bodyClassName: "grow-font-size", progressClassName: 'fancy-progress-bar' }); Puede agregar sus nombres de clase preferidos en el archivo global css y aplicar allí los estilos deseados. Aquí,
Además, si desea diseñar el ToastContainer , puede hacerlo de la misma manera.
<ToastContainer toastClassName="foo" style={{ width: "2000px" }} /> <ToastContainer className="foo" style={{ width: "2000px" }} />Para obtener más información sobre cómo diseñarlo de una manera diferente, puede consultar la documentación sobre estilo desde aquí How to style