如何设置ng-multiselect-dropdown的宽度为100pt？已尝试相关CSS

嘿，先揪出你代码里的一个小失误——你把width拼写成widht了！这是导致样式完全不生效的核心原因，先把这个拼写错误修正过来。

接下来，就算修正了拼写，有时候还会因为CSS优先级或者Angular的视图封装机制导致样式不生效，下面给你几个靠谱的解决方案：

方案一：修正拼写后的基础样式 #

先把最基础的拼写问题解决，这是一切的前提：

.multiselect-dropdown {
  width: 100pt;
}
.multiselect-dropdown .dropdown-btn {
  width: 100pt;
}

方案二：用自定义类提升样式优先级 #

如果上面的代码还是不生效，大概率是组件内部的默认样式优先级更高。你可以给组件加一个自定义类，通过更具体的选择器来覆盖默认样式：

首先在模板里给组件添加自定义类：

<ng-multiselect-dropdown 
  class="custom-fullwidth-multiselect"
  [settings]="yourDropdownSettings"
  ...其他配置属性
></ng-multiselect-dropdown>

然后编写对应的CSS：

.custom-fullwidth-multiselect.multiselect-dropdown {
  width: 100pt;
}
.custom-fullwidth-multiselect.multiselect-dropdown .dropdown-btn {
  width: 100pt;
}

这种方式比直接用!important更优雅，还不会影响页面上其他同组件的样式。

方案三：处理Angular视图封装限制 #

如果你是在Angular组件的内部样式文件里写的CSS，默认的ViewEncapsulation会阻止样式渗透到组件内部。这时候可以用::ng-deep强制样式生效（虽然官方标记为deprecated，但目前仍是常用方案）：

::ng-deep .multiselect-dropdown {
  width: 100pt;
}
::ng-deep .multiselect-dropdown .dropdown-btn {
  width: 100pt;
}

更推荐的方式是把这段样式放到全局样式文件（比如styles.css）里，这样就完全不受视图封装的限制了。

最后，你可以打开浏览器开发者工具（F12），选中下拉组件元素查看Styles面板，确认你的width样式是否被正确应用——如果样式被划掉，就说明优先级不够，换方案二试试就行。

内容的提问来源于stack exchange，提问作者Aniket