关于修改Element-ui组件默认样式的问题

1 对于某一些属性, 我们可以直接修改其样式, 显示端会自动显示为我们修改的属性

2 对于另外一些属性, 我们好像无法直接修改其显示样式

   具体原因好像是,  Element-ui封装的组件在解析为html代码时会按照自己的规则进行解析,

  这个规则总体概括应该是:   给普通标签添加类名和样式, 有时候会根据需求嵌套很多个标签, 我们需要做的是捕获我们需要的类名, 然后通过类名修改其样式

  但是不知道为什么, 有时候即使找到了相关的类名, 修改了其对应的属性, 还是无法生效, (在浏览器上直接修改会生效), 这就很奇怪

 

样例demo:

  

 

 

 

几个小原则:

  1 一般情况下, 组件的标签名就是这个元素的类名, 我们可以直接捕获到类名进行样式的修改

  2 上面的el-input_inner类名是Element-ui组件自动编译添加到el-input里面的元素, 虽然可以在浏览器上通过直接修改height属性来改变输入框的宽度, 但是无法在编写代码时捕获到该类名, 进行的height属性值修改也是无效的

 

posted @ 2021-01-08 12:07  0龙行者0  阅读(398)  评论(0编辑  收藏  举报