vue ElementUI中修改el-input__inner样式不同版本修改样式不生效

在Vue中使用ElementUI时，如果你发现修改el-input__inner的样式不生效，可能是由于以下原因：

1. 样式选择器优先级不足：ElementUI的默认样式可能具有更高的优先级。
2. 样式作用域问题：Vue组件中使用了作用域CSS，导致你的样式没有应用到正确的元素上。
3. CSS层叠顺序问题：新样式没有正确覆盖旧样式。
4. 版本问题：你可能在不同版本的ElementUI中遇到这个问题。

解决方法：

1. 增加样式优先级：

   • 使用更具体的CSS选择器，如.el-input__inner.my-custom-class。
   • 使用!important来强制应用样式，但要谨慎使用以避免维护问题。

2. 检查作用域CSS：

   • 确保你的样式是在正确的作用域内定义的，或者使用::v-deep（Sass/SCSS）或>>>（Less）来穿透作用域。

3. 调整CSS层叠顺序：

   • 确保你的自定义样式在ElementUI样式之后被加载。

4. 版本兼容性：

   • 查看ElementUI的官方文档，确认你修改的类是否在当前版本中存在。
   • 如果是版本更新导致的问题，查看迁移指南来了解如何修改你的代码以适应新版本。

示例代码：

/* 正确使用作用域CSS */
.my-input-wrapper ::v-deep .el-input__inner {
  border-color: #c0c4cc !important; /* 使用!important来增加优先级 */
}

<!-- 确保你的自定义样式在ElementUI样式之后被加载 -->
<style>
  @import '~element-ui/lib/theme-chalk/index.css'; /* ElementUI样式 */
  .el-input__inner {
    border-color: red; /* 自定义样式 */
  }
</style>
 
<template>
  <div class="my-input-wrapper">
    <el-input v-model="inputValue"></el-input>
  </div>
</template>

确保在实际环境中测试样式更改，并注意，随着ElementUI版本的更新，API可能会发生变化，你可能需要根据最新的文档调整你的样式代码。