首页 > 解决方案 > react-bootstrap-sweetalert 根本没有样式

问题描述

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

它是这样实现的:

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 警告图标显示正常)

有没有办法将自定义样式传递给它?我知道有一个名为“样式”的参数,但我不确定如何将样式传递给它。

谢谢!

标签: reactjssweetalert

解决方案


您可以设置组件的样式,因为它支持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>

推荐阅读