如何在CSS/Sass中排除.q-btn类覆盖disabled元素的默认光标样式

相关代码 #

模板代码 #

<q-expansion-item disable>
  <template v-slot:header>
    <q-btn label="click"></q-btn>
  </template>
  <q-card>yo</q-card>
</q-expansion-item>

无法修改的全局Sass代码 #

.disabled, [disabled]
  &, * 
    outline: 0 !important
    cursor: not-allowed !important

已尝试的覆盖Sass代码 #

.q-item
  &.disabled
    opacity: 1.0 !important
    .q-btn
      cursor: pointer !important
    &, *:not(.q-btn)
      cursor: default !important

需求与异常 #

预期实现：禁用的扩展项内，除.q-btn组件外的所有元素应用默认光标，.q-btn应用指针光标。
实际效果：覆盖样式未生效，:not()修饰符与通配符*配合后未达到预期。

核心问题出在两点：

• 不可修改的全局规则会给disabled元素的所有后代元素（包括.q-btn的内部子元素）强制加上cursor: not-allowed !important。光标是作用在当前 hover 的具体元素上的，不会自动继承父元素的设置。
• 原有覆盖逻辑有缺陷：仅给.q-btn本身设置了指针光标，没有覆盖它的内部子元素；同时*:not(.q-btn)会把.q-btn的子元素也判定为“非按钮元素”，强制设置为默认光标，最终导致hover到按钮内部时无法显示指针。

调整选择器逻辑与优先级即可，正确的覆盖Sass代码如下：

.q-item.disabled {
  opacity: 1.0 !important;
  // 先给禁用项的所有元素设置默认光标，优先级高于全局的not-allowed规则
  &, * {
    cursor: default !important;
  }
  // 单独给按钮及其所有内部子元素设置指针光标，选择器优先级更高
  .q-btn, .q-btn * {
    cursor: pointer !important;
  }
}

生效原理 #

同带!important的样式，选择器权重越高优先级越高，上述方案的选择器权重均高于全局不可修改的规则，因此可以正常覆盖。

• 编译后生成的.q-item.disabled, .q-item.disabled *选择器权重高于全局的[disabled] *规则，同带!important时会自动覆盖原有的not-allowed样式。
• 新增的.q-btn, .q-btn *选择器同时覆盖按钮本身和它的所有内部子元素，权重高于前面的默认光标规则，确保hover到按钮任意位置时都能显示指针。
• 其他子元素（比如.q-card、扩展项头部非按钮区域的元素）都会匹配第一条规则，显示默认光标，完全符合需求。

如果遇到Quasar组件仅添加disabled属性、未添加.disabled类的情况，可以将选择器调整为同时匹配两种场景：

.q-item.disabled, .q-item[disabled] {
  // 上述相同逻辑
}

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