现象描述

在自定义的组件中，使用app.wxss 样式，将不会生效
详情请看 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
也就是全局样式不可以应用到子组件里面

解决方案

将样式和 wxml 写在一起
在 component 中定义隔离方式

Component({options: {"styleIsolation": 'apply-shared',}...
})

下面是各种选项的说明 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

styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值：isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

微信小程序 app.wxss css 不生效相关推荐

微信小程序APP（商超营销类）经验总结
项目介绍这是一款主打门店营销的小程序.包括首页.门店.营销.个人设置.登录.数据统计展示.营销设置等. 本来要独立完成整个项目,包括前后端一套的,有些意外因素,项目临时收尾(说明:只完成了前端的部分 ...
微信小程序样式 WXSS
微信小程序样式 WXSS 样式基础尺寸单位样式导入内联样式选择器 less语法样式基础类似于web里面的css WXSS 用来决定 WXML 的组件应该怎么显示. WXSS 具有 CSS ...
HTML微信小程序的页眉代码,微信小程序样式wxss各种问题总结（不断更新）
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
微信小程序 app.json 详细介绍
微信小程序 app.json 详细介绍 {// 写各个页面的路径 (新增页面或者减少页面都要对其进行修改)"pages": ["pages/index/index&quo ...
微信小程序app.json全局配置项
微信小程序app.json全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以下属性: app.json配置项(该配置项由微信小程序开发 ...
微信小程序App.js应用
微信小程序App.js应用文章目录微信小程序App.js应用 1.App.js内容 2.判断用户以什么方式进入小程序 3.获取用户信息 4.设置全局变量 1.App.js内容 App.js写逻辑内 ...
*通配符与微信小程序的WXSS
在编写前端样式的时候,很多人都喜欢先用通配符规定一些样式但是,在微信小程序的wxss中,没有 * 通配符 ,所以只能用笨方法 , 把每个标签选上再设置 .
微信小程序App Page 模块化
微信小程序注册函数App() 在app.js里是一个App()函数,定义全局函数和数据,还可以用来注册一个微信小程序.在App()函数里有一些生命周期函数 App({onLaunch(option){ ...
微信小程序app.js给全局变量globalData赋值
微信小程序app.js 中,从数据库读取登录数据后,想把登录信息变为全局遍历,这里为globalData赋值和其他的页面赋值不同. 需要先定义 that=this 之后用that.globalDat ...

微信小程序 app.wxss css 不生效

文章目录

现象描述

解决方案

微信小程序 app.wxss css 不生效相关推荐

最新文章

热门文章