reactjs - 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 警告图标显示正常)
有没有办法将自定义样式传递给它?我知道有一个名为“样式”的参数,但我不确定如何将样式传递给它。
谢谢!
解决方案
您可以设置组件的样式,因为它支持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>
推荐阅读
- progressive-web-apps - PWA:防止 url 在 PWA 中打开
- python - 如何在熊猫中自动旋转数据
- rust - 如何在 rust 中定义可以包含任何原始数据类型的数组或向量?
- python - DM提到了不和谐的用户
- r - 在 group_by 子句中创建具有列名的函数
- python - 为什么我观察到求和的直接(手动)与循环评估之间的差异?
- reactjs - 用打字稿反应情节js
- python - Kivy - 使用更新的内容重建类/ Boxlayout
- javascript - 来自 C# 中 Javascript 的 BigInt 等价物
- flutter - Flutter 和 AWS Amplify 用户身份验证