uni-app 修改组件默认样式

修改 uni-app 组件默认样式

转载做下记录

切记类似于微信原生的,颜色不能修改有平台差异性。

最近刚开始使用uniapp开发,有些组件渲染之后会生成一些标签,我需要修改生成标签的样式。

直接写:

<style scoped>
	.uni-combox__input {
	    font-size: 14px;
	}
</style>

无效,字号还是组件默认定义的16px;

网上关于如何修改uniapp组件原来定义好的样式的文章很多。有的说style标签上不加scoped,就可以了;
有的说自己定义一个样式类,覆盖原来的样式就可以了;

有的说用 /deep/ 穿透可以修改

我的做法
不加 scoped 容易污染全局吧;
自己定义一个类,无效;

<style scoped>
.mycombox .uni-combox__input {
    font-size: 14px;
}
</style>

不加 scoped 使用 /deep/ ,无效
经过试验发现,style标签上加scoped,同时使用 deep 穿透 可以成功修改

<style scoped>
/deep/ .uni-combox__input {
    font-size: 14px;
}
</style>

————————————————

原文链接:https://blog.csdn.net/u014054437/article/details/105428765

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
UniApp中,如果你想修改`uni.showModal`组件样式UniApp 使用了 Vue.js 的单文件组件(.vue)来开发,并且提供了自定义主题和样式的能力。`uni.showModal`是一个原生API,但它允许你在组件内部通过`style`或` scoped slot`来覆盖默认样式。 1. **直接在组件内部**:你可以为`modal`元素添加一个`v-bind:class`属性,并根据需要动态绑定类名,然后在`.vue`文件的`<style>`标签或 scoped `style`块中定义对应的CSS规则。例如: ```html <template> <view v-bind:class="{ customModal: isCustom }"> <!-- modal内容 --> <uni-modal @onShow="showModal" @onHide="hideModal"> <view class="custom-modal-wrap"> <!-- 你的模态内容 --> </view> </uni-modal> </view> </template> <script> export default { data() { return { isCustom: false, // 根据需求控制是否使用自定义样式 }; }, methods: { showModal() { this.isCustom = true; }, hideModal() { this.isCustom = false; // 隐藏后恢复默认样式 }, }, styles: { .customModal: { /* 在这里编写你的自定义modal样式 */ background-color: '#f00'; // 例如改变背景颜色 width: '80%', // 可以调整宽度 padding: '20px', // 自定义内边距 }, .custom-modal-wrap { /* 可能需要的子元素样式 */ }, }, }; </script> ``` 2. **全局样式表**:如果你希望在整个应用中重用这些修改,可以在`app.vue`或`main.css`中添加全局样式。但请注意,这样可能会影响到所有使用`uni.showModal`的地方。 记得在隐藏`uni.showModal`后,将`isCustom`设置回`false`,以便切换回默认样式,防止样式混乱。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值