首页 > 其他分享 >vue2-样式冲突-使用deep修改子组件中的样式

vue2-样式冲突-使用deep修改子组件中的样式

时间:2023-07-04 23:57:14浏览次数:42  
标签:样式 deep color vue2 组件 20px

/deep/样式穿透

<template>
    <div class="left-container">
        <h3>Left 组件</h3>
        <my-count :init="9"></my-count>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}

h3 {
  color: red;
}

// 当使用第三方组件库的时候,如果有修改组件默认样式的需求,需要用到 /deep/
/deep/ h5 {
  color: pink;
}
</style>

标签:样式,deep,color,vue2,组件,20px
From: https://www.cnblogs.com/yang-young-young/p/17527409.html

相关文章

  • 关于滚动条样式
     美化滚动条样式,主要涉及以下几个伪元素属性(注,这里以chrome浏览器作示例)::-webkit-scrollbar 用于设置滚动条的整体样式在这里设置宽高,以控制滚动条尺寸,且必须要设置宽高,否则不生效宽高分别对应y轴和x轴的滚动条尺寸若宽高为0,则可隐藏滚动条,但仍可保持滚动  ......
  • DeepFashion2 的多进程处理代码(带进度条)
    importjsonfromPILimportImage,ImageDrawimportosfromtqdmimporttqdmimportmultiprocessingfromfunctoolsimportpartialdefconvert_rgba_to_rgb(image,output_path): #转换为RGB模式 rgb_image=image.convert('RGB') #保存为JPEG格式 rgb_......
  • pyqt5-样式设置
    1、介绍pyqt5中,允许通过类似css的层叠样式表的形式,直接为组件声明显示样式,比如设置字体、字体颜色和背景色等。具体的是,是通过QWidget类中声明的setStyle或setStyleSheet方法设置。setStyle(self,a0:QStyle)setStyleSheet(self,styleSheet:str)style(self)->QStylesty......
  • vue2-props-required必填项
    props的required必填项<template><div><h5>Count组件</h5><p>count的值是:{{count}}</p><button@click="add">+1</button></div></template><script>expo......
  • vue2-props-type值类型
    在声明自定义属性时,可以通过type来定义属性的值类型。示例代码如下:<template><div><h5>Count组件</h5><p>count的值是:{{count}}</p><button@click="add">+1</button></div></template>&......
  • print-js 实现页面打印PDF,与样式缺失问题
    参考https://blog.csdn.net/qq_36990322/article/details/105786298(样式继承问题)https://blog.csdn.net/qq_42571665/article/details/127277049(宽度配置)说明样式缺失是因为默认不继承样式。环境软件/系统版本说明dayjs^1.6.0步骤安装yarnaddprin......
  • vue2 input和select无法正常回显
    背景:使用vue进行对象赋值,如果是一个未在data声明的属性,会导致双向绑定无法正常回显。<template><div><div><labelfor="">姓名</label><inputv-model="info.name"type="text"></div><div>......
  • uni.app 给大家推荐一个 非常牛的 插件 上传图片 上传 word 上传xlsx 上传pdf
     插件地址地址:https://ext.dcloud.net.cn/plugin?name=lsj-upload兼容vue2 vue3微信小程序 等等等等图片放在下面了使用方法里面有介绍又到了码农 最重要的时刻了ctrlc  ctrlv  大法   ......
  • uni.app上传图片/上传七牛云 vue2 es6
    uni.app上传图片可以使用uni.app里面的api//uni.chooseImage({ // success:(chooseImageRes)=>{ // consttempFilePaths=chooseImageRes.tempFilePaths; // uni.uploadFile({ // url:that.$unishow+'/common/upload',//仅为示例,非真实的接口地......
  • uni.app上传视频vue2 es6
    上传视频可以使用uni.app里面的api letself=this; uni.chooseVideo({ count:1, sourceType:['camera','album'], success:function(res){ console.log(res) self.showVideo=true self.addVideo=false self.src=......