SweetAlert2 offers flexible styling options that allow you to create dialogs that match your React application's look and feel. By default, SweetAlert2 comes with a clean, modern design, but you can easily adjust its appearance using built-in themes and by applying your own custom CSS classes.

The library supports several built-in themes that you can include via CSS files. These themes can quickly change the overall style of all alerts to better fit your UI. To use a built-in theme, you simply import the corresponding CSS file into your project. For example, you might use a dark theme or a minimalist theme, depending on your application's needs.

For more granular control, SweetAlert2 lets you add custom CSS classes to different parts of the alert dialog. You can target the popup, the confirm button, the cancel button, and other elements by passing class names in the customClass option when calling Swal.fire. This approach gives you the flexibility to use your existing CSS or CSS-in-JS solutions to style alerts consistently with the rest of your React components.

Suppose your React app uses a theme with specific colors and button styles. You can integrate SweetAlert2 dialogs seamlessly by assigning your app's CSS classes through the customClass property. For instance, if you have a button style called myAppButton, you can pass it to SweetAlert2 so that the alert's confirm button matches the rest of your UI. Here is how you might do it:

import Swal from 'sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
import './AppTheme.css'; // Your custom theme

function showThemedAlert() {
  Swal.fire({
    title: 'Styled Alert',
    text: 'This alert uses your app theme!',
    icon: 'info',
    customClass: {
      popup: 'myAppAlert',
      confirmButton: 'myAppButton',
      cancelButton: 'myAppButtonCancel'
    },
    showCancelButton: true
  });
}

In this example, the alert popup and both buttons use classes defined in your app's CSS, ensuring a consistent and branded user experience. You can further adjust the dialog's appearance by targeting these classes in your stylesheets, using variables or theme providers as needed.