使用element-plus组件,修改date-picker默认样式

使用深度选择器来修改子组件的样式,今天遇到一个需求,在el-drawer中嵌入的el-date-picker,再一次总结一下深度选择器的用法,需求如下:

template内容:


   

使用lessscoped的CSS如下:

.el-input__inner{
    font-size: 26px;
}

目的是修改选择的年份的大小,让其显示为26px大小。结果运行代码,效果如下:

我们发现显示的年份字号并没有变大。我们同时添加字体颜色和对齐方式,以更清楚的看到效果,使用深度选择器进行控制。修改如下:

 

:deep(.el-input__inner){
    font-size: 26px;
    text-align: center;
    color:rgb(8, 101, 172) ;
}

运行效果如下:


总结深度选择器用法如下:

由于vue组件的封装目的是为了让组件之间不互相影响,着很好的解决了组件之间相互干扰的问题。但是同时也带来了一些问题:有时候又需要修改子组件的样式,此时vue中,我们可以使用深度选择器,在父组件中来影响子组件,从而解决这个问题。

  • CSS原生使用符号">>>"进行深度。
  • 在使用了CSS的预编译器时,
    1. VUE2中,可以使用/deep/或::v-deep进行深度选择
    2. VUE3中,推荐使用:deep(selector)进行深度选择

其他几个CSS相关的选择:

  • :slotted()

:slotted():在子组件定义样式插槽内容样式

默认情况下,作用域样式不会影响到  渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。


 
  • :global()

:global() :全局选择器,定义全局样式,不用单开一个没有scoped的style。



  • 动态css(v-bind)

vue3单文件组件的 

你可能感兴趣的:(前端,vue,vue.js,前端,深度选择器)