小程序自定义组件全局样式不生效的解决方法

当我们在小程序中使用自定义组件时，有时我们希望在组件中设置全局样式，但是发现这些样式并没有生效。这种情况通常是因为小程序默认会对组件的样式进行隔离，所以全局样式无法生效。解决方法如下：

1. 使用 wxss 文件实现全局样式

在小程序的根目录新建一个 app.wxss 文件，并在此文件中定义全局样式。然后在自定义组件中通过 @import 引入 app.wxss 文件即可。这样就可以实现全局样式了。

以常见的按钮样式为例，app.wxss 可以定义如下：

.button {
  background-color: #007aff;
  color: white;
  border-radius: 4rpx;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
}

在自定义组件中引入 app.wxss，如下所示：

<template>
  <view class="button">{{text}}</view>
</template>

<script>
Component({
  properties: {
    text: String
  }
})
</script>

<style lang="less">
@import '../../app.wxss';

.button {
  margin-bottom: 20rpx;
}
</style>

这样就可以在自定义组件中使用 button 类来实现全局的按钮样式了。

2. 使用 ::deep 选择器实现全局样式

在小程序的组件样式中，可以使用 ::deep 伪类选择器来穿透组件的隔离性，实现全局样式的应用。

例如，以下是一个自定义组件的示例：

<template>
  <view class="container">
    <slot></slot>
  </view>
</template>

<style lang="less">
.container {
  background-color: #eee;
  padding: 20rpx;
}
</style>

假设我们希望为该组件中的所有 text 组件添加全局样式，可以在 app.wxss 文件中定义样式：

::deep .text {
  font-size: 28rpx;
}

然后在自定义组件的样式表中使用 ::deep 伪类：

<template>
  <view class="container">
    <text>这是一段文字</text>
    <slot></slot>
  </view>
</template>

<style lang="less">
@import '../../app.wxss';

::deep .container {
  border: 1rpx solid #333;
}
</style>

这样就可以实现对全局的 text 组件添加样式了。需要注意的是，::deep 伪类在一些场景下可能会引起样式的不可预测性，使用时需要谨慎。