angular - 无法为 ngx 智能模式设置自定义宽度

问题描述

我正在尝试在 ngx-smart-modal 中设置自定义宽度。

我已经尝试过（如何将独特的自定义 CSS 添加到 ngx-smart-modals）上给出的步骤，并且还尝试了在 github 上为该项目创建的问题的解决方案，但没有运气:(。

版本“ngx-smart-modal”：“^7.1.1”，

在我导入的全局 styles.scss 中

@import '~ngx-lightbox/lightbox.css';

@import "~ngx-smart-modal/ngx-smart-modal";

在组件 .html 中

<ngx-smart-modal [customClass]="'pack-modal-custom'" #packModal identifier="packModal" class="pack-modal">
  <p>
     love this game
  </p>
</ngx-smart-modal>

在组件 .scss

.pack-modal-custom{
  min-width: 800px !important;
  max-width: none !important;
  background-color: black !important;
 }

但是这个模态的宽度仍然是 .nsm-dialog 中设置的 520px。有什么我做错了吗？

标签： angularmodal-dialogangular6

解决方案1：

将组件更改encapsulation为encapsulation: ViewEncapsulation.Native

@Component({
  selector: ...,
  encapsulation: ViewEncapsulation.Native
  ...
})

解决方案2：

::ng-deep .pack-modal-custom{
  min-width: 800px !important;
  max-width: none !important;
  background-color: black !important;
 }

解决方案 3：

将您的.pack-modal-customsass 代码移动到全局 .scss 文件（例如，根文件夹中的 styles.scss）

解释：

您需要先了解 Angular 的组件 css mechanize。长话短说，当向组件的 .scss 文件添加样式时，angular 会生成一个标记，该标记仅负责将样式添加到组件的元素中。这就是你不会让你的 sass 代码影响 nxg-modal 的原因。为此，您需要更改组件的封装模式。或者::ng-deep为您添加将样式“推送”到全局样式标签的内容。或者您可以通过将其添加到全局 sass 文件来自己完成。

检查这个角度公会了解更多详情。

angular - 无法为 ngx 智能模式设置自定义宽度

问题描述

解决方案

推荐阅读