Unable to customize styling.

[wiseaidev]

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:

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.

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:

.swal2-popup {
  display: flex;
}
.alert-box {
  display: flex;
}

Not sure what's wrong.