如何为单个Quasar QSelect自定义边框与下拉图标颜色

我正在使用Vue.js与Quasar框架，希望为处于outlined模式下的单个QSelect组件自定义边框及下拉箭头颜色，而非作用于组件内所有QSelect实例。

当前使用的代码如下：

:deep(.q-field--outlined .q-field__control:before) {
  border: 1.25px solid var(--primary); /* 更改边框颜色 */
  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 定位下拉箭头 */
:deep(.q-field__append .q-icon) {
  color: var(--primary); /* 更改下拉箭头颜色 */
}

/* 可选：鼠标悬停时更改图标颜色 */
:deep(.q-field__append .q-icon:hover) {
  color: var(--secondary); /* 鼠标悬停时的下拉箭头颜色 */
}

问题在于这些样式会全局生效，影响范围内所有QSelect组件。我希望通过自定义类或其他方法将样式限制为仅作用于单个QSelect，避免所有QSelect被统一设置样式。请问该如何将这些自定义样式仅应用于一个QSelect实例？

• 给目标QSelect添加自定义类：在模板中，给需要单独设置样式的QSelect添加一个自定义类名（比如custom-select），示例代码如下：

<q-select
  outlined
  class="custom-select"
  <!-- 组件其他属性 -->
/>

• 修改CSS选择器范围：在样式代码中，将自定义类名添加到选择器最前面，让样式仅作用于带有该类的QSelect实例，修改后的代码如下：

/* 自定义outlined模式下的边框样式 */
:deep(.custom-select.q-field--outlined .q-field__control:before) {
  border: 1.25px solid var(--primary);
  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 自定义下拉箭头颜色 */
:deep(.custom-select .q-field__append .q-icon) {
  color: var(--primary);
}

/* 鼠标悬停时的箭头颜色 */
:deep(.custom-select .q-field__append .q-icon:hover) {
  color: var(--secondary);
}

这样修改后，所有自定义样式只会对带有custom-select类的QSelect生效，不会影响其他QSelect组件。

内容的提问来源于stack exchange，提问作者taher.robbana