Element plus .el-textarea__inner 样式重构

以下有效，使用 >>> 深度选择器

<template>  
  <el-input  
    type="textarea"  
    v-model="inputValue"  
    class="custom-textarea"      
    >  
  </el-input>  
</template>  
<script setup>

import { ref } from 'vue'

const inputValue = ref('')
</script>
  
<style scoped>
 .custom-textarea >>>.el-textarea__inner {
  background-color: #ffffdd;
  height: 300px;
  width: 400px;
  white-space: nowrap;
  } 
</style>
 

去掉scoped 也可以实现样式重构

<template>  
  <el-input  
    type="textarea"  
    v-model="inputValue"  
    class="custom-textarea"      
    >  
  </el-input>  
</template>  
<script setup>

import { ref } from 'vue'

const inputValue = ref('')
</script>
  
<style>
 .custom-textarea .el-textarea__inner {
  background-color: #ffffdd;
  height: 300px;
  width: 400px;
  white-space: nowrap;
  } 
</style>
 

分析scoped的使用用法

style上添加scoped属性，就相当于给当前子组件的结构中都添加上一个data-v-×××自定义属性。

使用深度穿透也可以处理这个问题

深度选择器可以实现样式穿透
原生CSS： >>>
less： /deep/
scss： ::v-deep