二次封装element后如何才能改动里层样式

当你对Element UI组件进行二次封装并希望修改其内部样式的时，通常需要遵循以下步骤：

1. **解构组件**：首先，你需要拿到原始组件的实例或props，以便访问到其内部元素。在Vue中，你可以通过`ref`属性获取组件实例。

<template>
  <el-button ref="customButton" />
</template>

<script>
export default {
  setup() {
    const customButton = ref(null); // 获取ref实例
    return { customButton };
  }
}
</script>

2. **直接操作DOM**：然后，你可以直接访问`customButton.value.$el`来获取到内部的DOM元素，并进行样式修改。注意这种方式可能会失去Vue的一些优势，比如数据绑定和响应式更新。

import { ref } from 'vue';

setup() {
  const customButton = ref(null);
  
  customButton.value.$el.style.color = 'red'; // 修改颜色

  // 或者
  customButton.value.$el.classList.add('your-class'); // 添加自定义类
}

3. **使用`v-deep`或`.scope`修饰符**：如果你希望深度查找元素并修改样式，可以使用Vue的深选语法(`v-deep`)，或者在CSS模块中使用`.scope`伪类来限定作用域。

.customButton .el-button {
  color: red;
}

// 或者

<style scoped>
.ref-customButton .el-button {
  color: red;
}
</style>

4. **避免直接修改组件状态**：尽量避免直接修改原组件的状态，这可能导致状态同步的问题。如果需要改变内部状态，应在适当的地方触发组件的`updateProps`或其他提供更改机制的方法。

5. **覆盖内置样式**：如果想要替换整个组件的样式，考虑创建一个新的组件，基于Element UI组件并覆盖需要的样式。

记住，这种做法可能会导致维护复杂度增加，建议在不影响复用性和灵活性的前提下适度修改。