我网站中的 vue-ant-design 组件格式不正确

如何解决我网站中的 vue-ant-design 组件格式不正确

我在我的 vuejs 项目中使用 ant-design-vue 库来显示一个输入字段，左侧有一个下拉列表。

我想创建一个输入组，就像 https://www.antdv.com/components/input/ 中的这个输入组

我直接将这个输入组示例的代码复制到我的 Vuejs 组件中...

$myarray = Search-ADAccount -LockedOut | select -ExpandProperty SamAccountName

$result = foreach ($i in $myarray){
Select-String -Path "mypath" -pattern $i | select -ExpandProperty Line}
$result | out-file 'mypath2'

在我的应用程序中，输入组看起来像这样......

请注意文本输入字段是如何变成药丸形状的。这是为什么？

我注意到，如果我在 global.scss 文件中注释掉以下所有行...

<a-input-group compact>
  <a-select default-value="Option1">
    <a-select-option value="Option1">
      Option1
    </a-select-option>
    <a-select-option value="Option2">
      Option2
    </a-select-option>
  </a-select>
  <a-input style="width: 50%" default-value="input content" />
</a-input-group>

然后选项下拉列表和输入字段根据需要通过垂直分隔线连接。

我想知道为什么所有这些样式文件都会干扰蚂蚁设计输入组的显示。我特别惊讶的是 antd 样式文件会干扰，因为它也是 ant 设计库的一部分。