如何在Quasar v2中禁用expansion-item的悬停颜色效果？

你遇到的问题根源在于：Quasar v2的q-expansion-item组件，其悬停背景色样式是作用在内部的.q-expansion-item__header子元素上的，直接给根元素加hover样式无法覆盖内部子元素的默认样式，再加上scoped样式的作用范围限制，导致设置透明无效。

解决方法是使用Vue3的深度选择器:deep()穿透scoped样式，直接修改内部子元素的hover样式：

<template>
    <q-list>
        <q-expansion-item icon="mdi-compass" label="Hello World" class="no-hover-color">
            <q-card> Hello world </q-card>
        </q-expansion-item>
    </q-list>
</template>

<style scoped>
.no-hover-color :deep(.q-expansion-item__header:hover) {
    background-color: transparent !important;
}
</style>

如果Quasar默认样式优先级较高，!important是确保覆盖生效的必要项；若测试后不加也能生效，可自行移除。

如果需要全局移除所有q-expansion-item的悬停效果，可在全局样式文件（如src/css/app.scss）中修改Quasar的SASS变量：

$expansion-item-header-hover-bg: transparent;

这样无需给单个组件加类名，就能全局生效。

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