vue style设置了scoped属性 .ant-form .ant-form-item .ant-select-selection { width: 150px; }无效

如果你的样式设置了 scoped 属性，那么该样式只会作用于当前组件内的元素，而不会影响到其他组件的元素。因此，如果你的样式设置了 scoped 属性，但是对其他组件的元素无效，可能是因为你的样式权重不够大。

你可以试着增加样式的权重，例如：

<style scoped>
  .ant-form >>> .ant-form-item >>> .ant-select-selection {
    width: 150px;
  }
</style>

在 Vue 中，使用 >>> 符号可以穿透 scoped 属性，让样式的权重更高，从而覆盖其他组件的样式。

相关问题

vue style设置了scoped lang="scss"属性 .ant-form .ant-form-item .ant-select-selection { width: 150px; }无效

如果你在 Vue 中使用了 `lang="scss"` 属性来使用 SCSS 预处理器，那么你需要注意样式选择器的书写方式。

在 SCSS 中，使用 `&` 符号可以引用当前选择器的父级选择器，从而形成更加具体的选择器。因此，你可以尝试使用以下方式来书写样式：

<style scoped lang="scss">
  .ant-form {
    .ant-form-item {
      .ant-select {
        &.ant-select-selection {
          width: 150px;
        }
      }
    }
  }
</style>

这段样式中，我们使用了 `&` 符号来引用父级选择器，从而得到更加具体的选择器，从而提高了样式的权重。

vue中.ant-select下拉选项样式穿透设置下拉选项宽度为200px

如果您想要设置下拉选项的宽度为200px，可以在上面的代码基础上添加以下样式：

<template>
  <a-select class="my-select">
    <a-select-option value="1">Option 1</a-select-option>
    <a-select-option value="2">Option 2</a-select-option>
    <a-select-option value="3">Option 3</a-select-option>
  </a-select>
</template>

<style scoped>
.my-select .ant-select-dropdown-menu-item {
  background-color: red;
  width: 200px;
}
</style>

在上面的代码中，我们新增了 `width: 200px;` 样式来设置下拉选项的宽度为200px。