为什么我Vue项目中maz-ui的MazPhoneNumberInput组件样式显示异常？

我在注册表单的手机号输入项中使用maz-ui库实现国家代码下拉选择功能，使用的是该库的MazPhoneNumberInput组件。
当前我的手机号输入框样式显示异常，效果如下：

未达到组件的预期显示效果，官方预期效果如下：

以下是我的组件相关代码：

<template>
 <div>
   <MazPhoneNumberInput
     v-model="phoneNumber"
   />
   ... 其余与本问题无直接关联的代码
 </div>
</template>

<script>
 import { MazPhoneNumberInput } from 'maz-ui'
 import 'maz-ui/lib/css/maz-phone-number-input.css'
 export default {
  name: 'CuiRegister',
  components: { MazPhoneNumberInput },
 }
 ... 其余与本问题无直接关联的表单提交处理代码
</script>

故障原因 #

• 仅引入了手机号输入组件的单独样式，缺失maz-ui全局基础样式，该组件的布局、国家旗帜图标、下拉菜单样式都依赖全局样式定义，单独引入组件样式会导致结构渲染异常。
• 样式加载顺序异常，项目全局自定义样式或其他UI库样式覆盖了组件默认样式。
• 本地安装的maz-ui版本与文档版本不匹配，旧版本组件的样式路径、结构与新版存在差异。

修复步骤 #

1. 补充引入maz-ui全局基础样式，调整样式引入顺序：

import { MazPhoneNumberInput } from 'maz-ui'
// 先引入全局基础样式
import 'maz-ui/lib/css/index.css'
// 再引入手机号组件样式
import 'maz-ui/lib/css/maz-phone-number-input.css'

2. 若使用的是v3及以上版本的maz-ui，样式引入路径调整为：

import 'maz-ui/dist/css/index.css'
import 'maz-ui/dist/css/maz-phone-number-input.css'

3. 检查项目全局样式规则，避免出现input、select等通用标签的全局样式强制覆盖组件内部样式，可添加作用域限定自定义全局样式的生效范围。
4. 若上述方案无效，可直接引入全量maz-ui样式：

import 'maz-ui/dist/css/maz-ui-full.css'

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