uni-app 更改默认组件样式

最新推荐文章于 2024-10-20 13:40:33 发布

原创最新推荐文章于 2024-10-20 13:40:33 发布 · 4.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app 更改组件样式 #uni-app更改默认组件样式 #uni-app deep

uni-app 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在vue-cli3环境下，如何处理组件样式只作用于本组件而不污染全局的方法。通过在 scoped 样式中使用 /deep/ 或 ::v-deep 选择器，可以穿透组件的 scoped 属性，修改子组件的样式。同时，文章展示了在修改uView的Checkbox复选框样式时的具体应用，并提供了编辑前后的效果对比。这为开发者在uni-app或vue项目中更改默认组件样式提供了解决方案。

一、说明
二、解决
三、他山之石

一、说明

uView文档 Checkbox 复选框
vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局
横向排列不换行，如下
增加样式 flex-wrap: wrap;，成功换行

二、解决

1、在class前面加入deep

如果你期待通过如修改其子class的样式。来影响展示效果，直接增加class是没有任何效果的
需要在修改指定的组件样式class前面加入deep才可以

<style lang="scss" scoped>
/deep/ .u-checkbox-group--row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
</style>

2、在vue-cli3编译时，用 ::v-deep

在vue-cli3编译时，deep的方式会报错或者警告，我们用 ::v-deep

<style lang="scss" scoped>
::v-deep .u-checkbox-group--row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
</style>

3、编辑前，编辑好截图对比

编辑前
编辑后

三、他山之石

uni-app 更改默认组件样式