Vue3项目中PrimeFlex的margin类样式不生效该如何解决

问题原因 #

你能正常运行的第一个样例引入的是 PrimeFlex 2.0.0 版本，而本地项目执行npm install primeflex时默认安装的是PrimeFlex 3.x大版本，PrimeFlex 3.x做了不兼容的破坏性更新：移除了所有工具类名前缀的p-字符，所以你写的p-ml-4在3.x版本中不存在，样式自然不生效。

解决方法 #

两种方案二选一即可：

• 调整类名写法：将代码里所有PrimeFlex工具类的p-前缀去掉，比如把p-ml-4改成ml-4，其他类名同理（比如p-mr-3改成mr-3、p-d-flex改成d-flex）
• 保持旧版本写法：卸载当前高版本PrimeFlex，重装2.x分支版本：

npm uninstall primeflex
npm install primeflex@2.x

修改后重启项目即可看到margin样式正常生效。

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