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

Question

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

我已经尝试了 () 上给出的步骤，也尝试了针对 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;
 }

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

Answer 1

解决方案1：

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

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

解法二：

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

解法三：

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

解释：

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

查看此 angular guild 了解更多详情。

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

Cannot set custom width for ngx smart modal

modal-dialog

angular

angular6