SweetAlert2：更改字体大小

Question

我正在尝试用新的 sweetalert2 替换 sweetalert 控件，但我遇到了一些疑问。其中，我能够改变弹出窗口的宽度，但不能改变高度。看来“height”属性没有生效。

 const { value: causas } = Swal.fire({
                            title: "Titulo",
                            text: "Este es el mensaje!",
                            input: 'select',
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonText: "Confirmar!",
                            confirmButtonColor: "#DD6B55",
                            icon: 'warning',
                            cancelButtonText: "Cancelar!",
                            closeOnConfirm: true,
                            closeOnCancel: true,
                            width: 800,
                            height: 800,

                            inputOptions: {
                                'Causas': {
                                    cause1: 'c1',
                                    cause2: 'c2',
                                    cause3: 'c3',
                                    cause4: 'c4'
                                }
                            },
                            inputPlaceholder: 'Seleccione el item',
                            showCancelButton: true,
                            inputValidator: (value) => {
                                return new Promise((resolve) => {
                                    //if (value === 'oranges') {
                                    //    resolve()
                                    //} else {
                                    //    resolve('You need to select oranges :)')
                                    //}
                                })
                            }
                        })

                        if (fruit) {
                            Swal.fire(`You selected: ${fruit}`)
                        }

我也想改变字体大小，但我还没找到怎么做。也许我应该生成/创建一个 css 文件？你能帮助我吗？谢谢！！

Answer 1

我刚刚修好了！我在 css 文件中添加了属性。

.swal2-popup {
    font-size: 14px !important;
}

.swal2-styled {
    padding: 10px 32px 10px 32px !important;
    margin: 20px 10px 0px 10px !important;
    width: 170px;
    height: 45px;
}

Answer 2

在 Angular 中你可以这样做。

对于图标

::ng-deep .swal2-icon { font-size: 8px; }

对于模态

::ng-deep .swal2-popup { width: 20rem; }

用于文本/标题

::ng-deep .swal2-title { font-size: 15px; }