这是因为 Vue 组件共享了同一个样式表，而你在 A 组件中设置的样式会影响到整个应用中的所有文本框，包括 B 组件中的文本框。

为了解决这个问题，你可以在 A 组件中将文本框的样式限定在该组件的作用域内，方法是使用 scoped 属性来限定样式的作用范围，示例如下：

<template>
  <div class="a-component">
    <input type="text" class="text-input">
  </div>
</template>

<style scoped>
.a-component .text-input {
  /* A 组件中文本框的样式 */
}
</style>

这样设置之后，A 组件中的文本框样式只会影响到 A 组件本身，而不会影响到其他组件，包括 B 组件。

如果你需要在多个组件中共享相同的样式，你可以将样式提取到一个单独的样式表文件中，然后在需要使用该样式的组件中引入，例如：

/* 在一个单独的样式表文件中定义文本框的样式 */
.text-input {
  /* 共享的文本框样式 */
}

<template>
  <div class="a-component">
    <input type="text" class="text-input">
  </div>
</template>

<style>
@import "path/to/shared-styles.css";
/* A 组件中使用共享样式 */
</style>

<template>
  <div class="b-component">
    <input type="text" class="text-input">
  </div>
</template>

<style>
@import "path/to/shared-styles.css";
/* B 组件中使用共享样式 */
</style>

这样设置之后，多个组件可以共享同一个样式表文件中定义的样式，但是样式仍然会被限定在各自组件的作用域内，不会相互干扰。