The Element UI style cannot be modified ., Elementui

The Element UI style cannot be modified ., Elementui

The Element UI component is very convenient to write recently in the project. However, after all, Element UI has its own default style, which is not required by the customer, however, I encountered a difficult problem when I wanted to modify the style.

Here we will not discuss how to introduce and use Element. There are many official documents and Baidu documents. Here we will mainly discuss the issue that the style mentioned in the question cannot be modified.

The Element official document provides the simplest paging component:

<Div class = "block"> <span class = "demonstration"> effects greater than 7 pages </span> <el-pagination layout = "prev, pager, next ": total = "1000"> </el-pagination> </div>

Of course, this is the default style of the Element. When you modify the style, such as the spacing and border between each number, the corresponding modification cannot be found in the debugger.

 

How can this problem be solved?

<style lang="scss" scoped>    @import "../../../../styles/home/proMessage.scss";</style>

The above code is used to introduce styles. We only need to delete the scoped attribute, or if scoped involves other styles, write another style label, modify the style of the Element component in the new style label.

<style lang="scss">    .el-pagination {            color: #333333;        }    </style><style lang="scss" scoped>    @import "../../../../styles/home/proMessage.scss";</style>