Closed wiseaidev closed 2 years ago
Hello there. I am trying to define and apply some CSS rules on a Swal.fire instance. For example, the following alert text looks off position, so I want to center it with the icon.
Swal.fire
The react component I have created:
import React from 'react'; import Swal from 'sweetalert2'; import withReactContent from 'sweetalert2-react-content'; import { Box } from '@mui/material'; import "./style.css" const MySwal = withReactContent(Swal); const CustomSweetAlert = ({content, variant, delay}) => { const sweetAlerts = (content, variant, delay) => { MySwal.fire({ icon: variant, text: content, background: "white", color: "black", position: 'top-end', toast: true, showCancelButton: false, showConfirmButton: false, timer: delay, timerProgressBar: true, didOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer) toast.addEventListener('mouseleave', Swal.resumeTimer) }, }); }; return ( <Box className="alert-box"> {sweetAlerts(content, variant, delay)} </Box> ); }; export default CustomSweetAlert;
CSS rules:
.swal2-timer-progress-bar-container .swal2-timer-progress-bar { background-color: black; color: black; } .swal2-popup .swal2-html-container { text-align: center; border: 1px solid red; } .alert-box{ text-align: center; border: 1px solid red; }
As you may probably guess, the class names were taken using inspect element:
That's pretty much it, I am wondering how to apply custom styles on these elements.
I have read the docs, but, unfortunately, didn't find any mention about text alignment and stuff.
Found the issue, there is some element that sets the display property to grid, changed it in the browser seems to fix the issue:
grid
However, the changes don't reflect if i define it in a custom CSS file:
.swal2-popup { display: flex; } .alert-box { display: flex; }
Not sure what's wrong.
Hello there. I am trying to define and apply some CSS rules on a
Swal.fire
instance. For example, the following alert text looks off position, so I want to center it with the icon.The react component I have created:
CSS rules:
As you may probably guess, the class names were taken using inspect element:
That's pretty much it, I am wondering how to apply custom styles on these elements.
Edit
I have read the docs, but, unfortunately, didn't find any mention about text alignment and stuff.
Edit1
Found the issue, there is some element that sets the display property to
grid
, changed it in the browser seems to fix the issue:However, the changes don't reflect if i define it in a custom CSS file:
Not sure what's wrong.