如上图,
Skyline模式下,
在组件内的 flex 和 items-center 样式,不起作用。
直接把组件内的代码放到页面就没问题。
------------------------------------------------------------------------------------
我是用的Uniapp开发的,附上解决方案:
修改 \node_modules\@dcloudio\uni-cli-shared\dist\json\mp\jsonFile.js 文件
function addMiniProgramComponentJson(filename, json) {
// 方法中增加下面这一行,编译后会自动给组件里面加上 optons.styleIsolation 配置
json = Object.assign(json,{"styleIsolation": "apply-shared" });
jsonComponentsCache.set(filename, json);
}
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB
skyline 的组件样式隔离有调整。webview 模式在 app.wxss 里写个标签名样式 view { xxx } ,默认是全局生效的。但 skyline 模式是不生效的。
如果是 class,则需要注意配置 styleIsolation 选项来使其生效。或者直接使用 ~xxx(class 名)语法来生效。
/* your-component.wxss */ @import '../../app.wxss';
https://developers.weixin.qq.com/community/develop/doc/0004c684898400cbe2801119f66000?highLine=Skyline%2520%25E7%25BB%2584%25E4%25BB%25B6%25E6%25A0%25B7%25E5%25BC%258F
上面的帖子反馈的也是同样的问题,app.wxss,文件里面的样式,在Skyline模式下的,组件(Components)内部不起作用