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

Question

我正在尝试在 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;
 }

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

Answer 1

解决方案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 机械化。长话短说，当向组件的 .scss 文件添加样式时，Angular 会生成一个令牌，负责仅将样式添加到组件的元素。这就是你的 sass 代码不会影响 nxg-modal 的原因。为此，您需要更改组件的封装模式。或者添加将::ng-deep样式“推送”到全局样式标签的功能。或者您可以通过将其添加到全局 sass 文件中来自行完成。

检查这个角度公会以获取更多详细信息。