1
  • vue 文件中的关键代码差不多就下面这样
<el-form-item>
   <el-input v-model="form.name" auto-complete="off" placeholder="手机号\邮箱\用户名" class="login-form-input"></el-input>
</el-form-item>

<style>
    .login-form-input .el-input__inner {
        border: 0 none;
        border-bottom: 1px solid #ccc;
        border-radius: 0px;
    }
</style>
  • 浏览器中渲染出来的 html

  • 但是编译出来的 style不知道为什么选择器被修改了,加了个属性选择器。

我试了下,只要是写在 vue文件中的样式,编译出来都会加一个属性选择器。这怎么搞?意思是 Element-UI 只能大概定制一下主题,不能改太细节的东西?


7个回答

2

已采纳

<style scoped>

2

楼主想覆盖element的样式的话,个人有那么几点建议:

  • 通用样式的覆盖,比如基色或者element组件通用样式修改,可以放在一个css文件(或者是scss等),在main.jsimport。element也提供了自定义主题的方式

  • 非通用样式,业务组件的样式覆盖可以考虑在vue单文件组件中覆盖,此时需要注意,涉及到选择器优先级的问题,部分样式需要使用style的全局样式(即不加scoped),使用全局样式的时候尽量添加业务组件的根组件选择器,以免影响其他组件中对element组件的样式。

2

说下,要想修改 UI 框架的样式,就不能加『scoped』

1

肯定的一点是可以修改,你肯定是方法不对或者样式优先级没有element定义的高

0

可以但是必须优先级要高

1

这个不是优先级的问题吧,Element-UI 编译后把我自定义的选择器都改了,在最后加了个属性选择器,怎么可能起作用

GreatAuk · 5月19日

展开评论
0

看错了,,,

0

我也遇到了类似的问题,网上找了好久,官方的方法比较适合针对某个项目进行全方位的样式重构,如果只是在开发中引用一两个组件太麻烦,如果直接在组件样式里重构,因为有scoped的存在,会给类名加一个唯一标识符,所以重写样式无法修改,去掉scoped又会污染其他组件样式,我最后想了个方法。直接在组件里加一层div,类名和组件一致,在这个类名下进行样式修改然后把style的scoped去掉,这样又能针对这个组件重置UI库的样式又不会影响其他组件。如果想整体修改的话直接去改源码就行了,或者在App.vue下改。

撰写答案