PrimeReact Dropdown组件为何无法识别自定义类样式？

你现在的问题出在CSS语法上——普通原生CSS不支持嵌套写法，你写的嵌套结构只有Sass/Scss这类预处理器能识别，浏览器不认，所以检查元素时看不到这些样式。

直接把嵌套改成后代选择器的写法就行，给每个PrimeReact的默认类加上.custom-dropdown前缀：

.custom-dropdown .p-dropdown-items {
  display: flex !important;
  flex-wrap: wrap !important;
}

.custom-dropdown .p-dropdown-items-wrapper {
  overflow: hidden !important;
}

.custom-dropdown .p-dropdown-panel {
  max-width: 200px !important;
  min-width: 200px !important;
}

如果你的项目用了CSS Modules（比如React中文件名带.module.css），还要注意PrimeReact的类名会被模块化哈希处理，需要用:global()包裹默认类名：

.custom-dropdown :global(.p-dropdown-items) {
  display: flex !important;
  flex-wrap: wrap !important;
}

.custom-dropdown :global(.p-dropdown-items-wrapper) {
  overflow: hidden !important;
}

.custom-dropdown :global(.p-dropdown-panel) {
  max-width: 200px !important;
  min-width: 200px !important;
}

改完后刷新页面，检查元素应该就能看到这些样式生效了。

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