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

Question

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

我已经尝试了在 ( How to add unique custom CSS to 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;
 }

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

Answer 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了解更多详情。