uniapp踩坑之修改组件默认样式
阐述:
- 最近刚开始使用uniapp开发,有些组件渲染之后会生成一些标签,我需要修改生成标签的样式。比如< uni-combox >、< uni-number-box > 等组件,我觉得它们都太大了,需要重新自定义样式。
网上关于如何修改uniapp组件的操作。
这种方式不是不可以,但是针对的平台不同,针对的客户端也不同。这些方式也许在H5页面上就可以,在小程序上面就不可以。大家多试试看。
- 有的说style标签上不加scoped,就可以了;
- 有的说自己定义一个样式类,覆盖原来的样式就可以了;
- 有的说用 /deep/ 穿透可以修改。
直接在组件的style修改(无效)
以下两种方式在小程序均无效。
<style scoped>
.uni-collapse-cell__title {
font-size: 14px;
}
/deep/ .uni-collapse-cell__title{
font-size: 14px;
}
</style>
最终解决方案(针对uniapp的小程序)
- 在uniapp项目的跟目录下面的App.vue 这个下面去修改默认组件的样式。我这里只是针对小程序做的修改,测试。至于其他的客户端,可参考以上 网上关于如何修改uniapp组件的操作 。
- PS:在修改的时候要使用调试工具找到具体要修改的class类名。
<style>
/* 修改发票更多选项 - 下拉选择框默认样式 uni-collapse*/
.uni-collapse-cell__title {
height: 35px !important;
text-align: initial !important;
margin-left: 3px !important;
}
</style>