react-bootstrap-sweetalert 完全没有样式
react-bootstrap-sweetalert has no styles at all
我在呈现甜蜜警报时遇到问题。它正在为我显示,但根本没有任何样式,只有一个带有小默认按钮的白框。当我将鼠标移到它上面时,我看到了白色的文本,但看起来它根本没有任何样式。
是这样实现的:
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" 的参数,但我不确定如何将样式传递给它。
谢谢!
您可以设置组件的样式,因为它支持 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>
我在呈现甜蜜警报时遇到问题。它正在为我显示,但根本没有任何样式,只有一个带有小默认按钮的白框。当我将鼠标移到它上面时,我看到了白色的文本,但看起来它根本没有任何样式。
是这样实现的:
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" 的参数,但我不确定如何将样式传递给它。
谢谢!
您可以设置组件的样式,因为它支持 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>