uniapp踩坑之修改组件默认样式

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>