跳到主要内容

常见问题

为什么在组件中无法覆盖组件库样式？​

1.在自定义组件中使用引用组件时，需开启styleIsolation选项​

Vue 3.2及以下版本可以使用如下配置开启 styleIsolation: 'shared'选项：

// isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
// apply-shared 表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面；
// shared 表示页面样式将影响到自定义组件，自定义组件中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<script lang="ts" setup>
</script>

Vue 3.3+可以通过 defineOptions 开启 styleIsolation: 'shared'选项：

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared'
  }
})
</script>

2.有scoped必须加穿透​

<template>
  <wd-tabs :customClass="getClass()" v-model="tabActive">
    <template v-for="(item, index) in tabList" :key="index">
      <wd-tab :title="item.title" :name="item.key"></wd-tab>
    </template>
  </wd-tabs>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'message',
  options: {
    // apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
    // shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
    styleIsolation: '‌shared‌',
  },
})
</script>
<style lang="scss" scoped>
:deep(.wd-tabs) {
  height: 100%;
  .wd-tabs__nav {
    background: linear-gradient(45deg, #0081ff, #1cbbb4);
  }
  .wd-tabs__container {
    flex: 1;
  }
  .wd-tabs__body {
    position: relative;
  }
  .wd-tabs__line {
    background-color: #fff;
  }
}
</style>

alt text

Sass 抛出大量错误和警告​

Dart Sass 3.0.0 废弃了一批 API，而组件库目前还未兼容，因此请确保你的 sass 版本为 1.78.0 及之前的版本。可以通过以下命令安装指定版本：

pnpm add sass@1.77.6 -D

nocss或者自定义类名要定义在第三方组件上，必须定义在 custom-class 上。否则小程序不兼容​

alt text

css变量不可使用驼峰，否则小程序不兼容​

alt text

当发现小程序模拟器清除缓存你的更改也没生效时，需要重新 npm run dev:mp 或者 HBuildx右键--重新运行​

uniapp 内置组件必须加 class 控制样式，不可使用标签名。​

例如：swiper-item 在 h5 段生成的是 uni-swiper-item 在小程序生成的是 swiper-item

alt text

Toast 和 MessageBox 组件调用无效果？​

首先要检查一下用法是否正确，uni-app 平台不支持全局挂载组件，所以 Message、Toast 等组件仍需在 SFC 中显式使用，例如:

<wd-toast></wd-toast>