uniapp(微信小程序)＞关于父子组件的样式传递问题(自定义组件样式穿透)_uniapp 样式穿透
由于\"微信小程序\"存在【样式隔离机制】，且默认设置为isolated(启用样式隔离)，因此这里给出以下两种解决方案：
// 小程序编译机制1. 当 存在时，uni-app 会通过 添加属性选择器 实现样式隔离（如 [data-v-hash]）。但小程序编译后，自定义组件无法添加此类属性，也就无法命中元素2. 非 scoped 的 标签不会添加隔离属性// H5无论是否添加\"scoped\"属性,样式表现都一致H5 的渲染基于浏览器，page 会被解析为 或 元素。即使使用 ，由于浏览器默认的样式继承机制， 样式可能间接生效（如通过父元素继承）
1.CSS变量或者SCSS变量穿透（推荐: 此方案不受样式隔离限制，适配所有端）
缺点：所需的CSS属性要逐个设置变量,自定义组件逐个接收
<template> <Child class=\"parent-class\"></Child></template><style>.parent-class { /* 定义 CSS 变量 */ --img-width: 262rpx; --img-height: 120rpx; --img-border-radius: 16rpx 16rpx 0 0;}</style>
<template> <view class=\"child-box\"> <image class=\"child-img\" /> </view></template> <style>.child-img { width: var(--img-width); height: var(--img-height); border-radius: var(--img-border-radius);}</style>
如果希望将CSS变量存放在全局样式中进行管理:
// @/styles/variable.css:root { --custom-img-width: 298rpx; --custom-img-height: 186rpx; --custom-img-border-radius: 8rpx; --custom-img-width-1: 262rpx; --custom-img-height-1: 120rpx; --custom-img-border-radius-1: 8rpx 8rpx 0 0;}// APP.vue文件引入@import \'@/styles/variable.css\';// 父组件parent.vue .parent-class { --img-width: var(--custom-img-width); --img-height: var(--custom-img-height); --img-border-radius: var(--custom-img-border-radius); }
2.配置隔离模式（不太推荐）
styleIsolation是\"微信小程序\"特有的样式隔离配置项，具体有哪些属性值在最下方图中。
在测试中,可能是–组件层级–的缘故，只有配置了\"shared\"、\"page-shared\"样式才生效。
注意: 父子组件标签不能添加\"scoped\"属性，可把这个样式单独放进
缺点:
1.易造成样式污染,即父子组件若存在同类名会相互干扰样式,其他设置了\"shared\"的组件可能也会受到污染
2.子组件元素要定位明确，否则无法命中元素
2.1 选项式api:
<!-- 父组件 Parent.vue -->export default { options:{ styleIsolation: \'shared\', }, data() { return { } }}
2.2 组合式api:
<!-- 父组件 Parent.vue --><script setup>import { defineOptions } from \'vue\';defineOptions({ options: { styleIsolation: \'shared\' }});</script>
.child-img { width: 298rpx; height: 186rpx; border-radius: 16rpx; }
文档地址
