在组件上直接使用 class 有的生效有的不生效?

Question

最近在使用 uni-app 进行开发,发现在有的组件上使用 class 在编译到小程序后不会生效，但是有的组件设置 class 却是生效的。例如

// 不生效
<uni-list class="mt-10" :border="false">
    <uni-list-item title="收藏"></uni-list-item>
  </uni-list>

// 生效
<uni-icons class="mt-10" type="compose" size="18" />

mt-10 这个类在 app.vue 中设置。

一开始以为是因为组件存在多根标签不会生效,但是打开组件看也是单根标签。也有可能是 styleIsolation 隔离设置问题,但是对比生效和不生效的组件也找不出有 styleIsolation 设置的地方。这问题出在什么地方?

Answer 1

先看下浏览器控制台元素里面 类名有没有加上
如果加上了选中元素 看右侧是否有对应的样式代码
如果有但是被覆盖了 就是权重不够
基本就这几种情况 仔细检查 慢慢定位就好

Answer 2

不生效的问题解决了,就是需要显式设置组件的 display 属性,例如设置为 display: block。但是为什么 uni-icons 不设置也可以生效。一种可能是和小程序解析不知名标签的行为有关,uni-icons 被默认解析为类似 display: inline-block,可能是内部包围了 text 标签的缘故,只是猜测。这个想到了当初刚学 html 时,那时的内容还比较旧,还需要兼容 nav, article 这些 html5 标签,这个时候也需要在 reset.css 文件中显式设置这些标签的 display 属性,不然浏览器可能无法解析。

Answer 3

有以下四种解决方案，根据经验，调整 styleIsolation 设置通常是解决此类问题的关键步骤。如果这个方法没有解决问题，再尝试其他方法三个解决方案.

调整 styleIsolation 设置

根据你的描述，最有可能解决你问题的方法是调整 styleIsolation 设置。以下是具体步骤：

1. 在 pages.json 或组件的 JSON 配置中添加 styleIsolation 设置：

   {
     "styleIsolation": "shared"
   }

   这样可以确保页面的样式能够影响到组件，解除样式隔离。

使用深度选择器或 !important 来提高样式优先级

如果 styleIsolation 设置没有解决问题，你可以尝试使用深度选择器（>>> 或 /deep/）或 !important 来强制应用样式：

2. 使用深度选择器：

   .mt-10 >>> .uni-list {
     margin-top: 10px !important;
   }

确保样式定义在全局作用域中

确认你的样式定义在全局作用域中，而不是局部作用域。你可以在 App.vue 中定义全局样式，或者在 uni.scss 中定义全局样式：

3. 在全局样式中定义：

   .mt-10 {
     margin-top: 10px;
   }

清理项目缓存并重新编译

有时编译器可能会忽略某些样式。你可以尝试清理项目缓存并重新编译，确保所有样式都被正确应用。

4. 清理缓存并重新编译：

   • 清理项目缓存。
   • 重新编译项目。