Fix: Restore textAlign functionality via ToastContainer prop

[JashanGill04]

Description:
Fixes #1244

This pull request resolves a regression where the textAlign style was not being applied to toast notifications. The original issue (#657) was reintroduced in a recent version, making it impossible to globally set text alignment for all toasts.

The fix ensures that style properties are correctly applied. For textAlign to work as expected, the toast element must be a block-level element. Therefore, the correct way to implement this is by applying a global toastStyle prop to the ToastContainer.

Changes Made

Ensured that custom styles passed via the toastStyle prop on ToastContainer are correctly applied to every toast it renders.

Updated the approach for text alignment to rely on this global prop for more consistent and predictable CSS behavior.

New Usage for Global Text Alignment

To properly align the text for all toasts rendered by a container, you must now use the toastStyle prop on the component itself. You need to set both display: "block" and the desired textAlign value in the style object.

Example Code:

JavaScript

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

function App() {
// The toast call is now simple, with no style options.
const showToast = () => {
toast("This text is now properly centered!");
};

return (

Show Centered Toast

  {/* The toastStyle prop is now set on the container to apply
    the style to all toasts rendered by it.
  */}
  <ToastContainer 
    toastStyle={{
      display: "block",
      textAlign: "center",
    }}
  />
</div>

);
}
This approach provides a reliable way to globally control text alignment for all toasts within a specific container.