react-bootstrap-sweetalert 完全没有样式

Question

我在呈现甜蜜警报时遇到问题。它正在为我显示，但根本没有任何样式，只有一个带有小默认按钮的白框。当我将鼠标移到它上面时，我看到了白色的文本，但看起来它根本没有任何样式。

是这样实现的：

import SweetAlert from 'react-bootstrap-sweetalert';
export default function LoginPage() {
    const classes = useStyles();
    const [alert, setAlert] = React.useState(null);

const warningAlert = () => {
        setAlert(
            <SweetAlert
                warning
                confirmBtnText="Try Again!"
                confirmBtnBsStyle="warning"
                btnSize="lg"
                title="Please Verify your Email and Password!"
                onConfirm={() => hideAlert()}
                onCancel={() => hideAlert()}
            >
                Something went wrong....
            </SweetAlert>
        );
    };
    const hideAlert = () => {
        setAlert(null);
    };

return (
        <div className={classes.container}>
            {alert}
            <GridContainer justify="center">

它完全按预期工作，但只是一个白框（ps 警告图标显示正常）

有没有办法将自定义样式传递给它？我知道有一个名为 "style" 的参数，但我不确定如何将样式传递给它。

谢谢！

Answer 1

您可以设置组件的样式，因为它支持 style 和 customClass 属性 -

 <SweetAlert
    title="Yay!"
    customClass="containerBox" // custom css class
    style={{backgroundColor:'blue'}} // styling can be done here
    confirmBtnBsStyle="danger"
    cancelBtnBsStyle="default"
    onConfirm={this.onConfirm}
    onCancel={this.onCancel}
  >
  <span>A custom <span style={{color:'#F8BB86'}}>html</span> message.</span>

 </SweetAlert>

react-bootstrap-sweetalert 完全没有样式

react-bootstrap-sweetalert has no styles at all

reactjs

sweetalert