React警报未以正确的样式显示

我已在库下方安装了警报对话框 npm install react-confirm-alert --save 但不幸的是,CustomUI警报没有以正确的css样式显示。我们还要补充什么吗?

在顶部下方导入 App.js 文件。

import { confirmAlert } from 'react-confirm-alert'; // Import
import "react-confirm-alert/src/react-confirm-alert.css"; // Import css


        const removeRecord = (indexToRemove) => {
        const newList = currentRecord.filter((item, index) => index !== indexToRemove);
        setCurrentRecord(newList);
      }

    function handleClickBasic(indexToRemove) {
        confirmAlert({
          customUI: ({ onClose }) => {
            return (
              <div className='custom-ui'>
                <h1>Are you sure?</h1>
                <p>You want to delete this file?</p>
                <button onClick={onClose}>No</button>
                <button
                  onClick={() => {
                    removeRecord(indexToRemove)
                    onClose();
                  }}
                >
                  Yes, Delete it!
                </button>
              </div>
            );
          }
        });
      }

根据npm库链接的实时演示,预期输出