Use the element-plus component to modify the default style of date-picker

Use the depth selector to modify the style of the subcomponent. Today, I encountered a requirement. The el-date-picker embedded in the el-drawer, once again summarizes the usage of the depth selector. The requirements are as follows:

template contents:

<el-drawer size="70%" v-model="drawer" title="选择年份" :show-close="false" direction="rtl">
   <el-date-picker v-model="selectedDate"  :disabledDate="disabledDate" type="year" placeholder="选择年"></el-date-picker>
</el-drawer>

The CSS using less and scoped is as follows:

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

The purpose is to modify the size of the selected year so that it is displayed at a size of 26px. As a result, the code is run, and the effect is as follows:

We found that the font size of the displayed year has not increased. We also add font color and alignment to see the effect more clearly, controlled with the depth selector. Modify as follows:

 

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

The running effect is as follows:

---

To summarize the depth selector usage is as follows:

Since the purpose of encapsulation of vue components is to prevent components from interfering with each other, it solves the problem of mutual interference between components. But at the same time, it also brings some problems: Sometimes it is necessary to modify the style of the child component. At this time, in Vue, we can use the depth selector to affect the child component in the parent component, so as to solve this problem.

• CSS natively uses the notation ">>>" for depth.
• When using a CSS precompiler,
  1. In VUE2, you can use /deep/ or ::v-deep for depth selection
  2. In VUE3, it is recommended to use: deep(selector) for deep selection

---

A couple of other CSS-related options:

• :slotted()

:slotted(): Define style slot content style in child component

By default, scoped styles do not affect  <slot/> rendered content, as they are assumed to be held and passed in by the parent component.

<template>
  <div>
    <slot>插槽内容，如果外部给出，则替换掉</slot>
  </div>
</template>
 
<style lang="less" scoped>
:slotted(.blue) {
  color: blue;
}
</style>

• :global()

:global() : global selector, define the global style, no need to create an unscoped style separately.

<style scoped>
:global(.el-input__inner) {
    color: red;
}
</style>
<!-- 等效于 -->
<style>
 .el-input__inner{
     color:red
 }
</style>

• dynamic css (v-bind)

The tags of vue3 single-file components  <style> support the use of  v-bind CSS 函数linking CSS values ​​to dynamic ones 组件状态, that is, we can introduce responsive variables in script tags in style tags.

<template>
    <span class='sc'>
        span 内容
    </span>
</template>
 
<script setup>
import { ref } from 'vue';
const redColor = ref('red')
 
</script>
 
<style scoped>
.sc{
    color: v-bind(redColor);
}
</style>