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

解决方案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-custom sass代码移动到全局.scss文件（例如，根文件夹中的styles.scss）

奖励：

您需要首先了解angular的组件css机械化。简而言之，当向组件的.scss文件中添加样式时，angular会生成一个 token ，该令牌仅负责将样式添加到组件的元素中。这就是您不会获得影响nxg-modal的sass代码的原因。为此，您需要更改组件的封装模式。或添加::ng-deep，它会将样式“推”到您的全局样式标签中。或者，您可以自己将其添加到全局sass文件中。

选中此angular guild以获得更多详细信息。

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

1 个答案: