How does CSS style overwrite the original style? Using Vue customizations to implement overlay Elementui styles

What this article brings to you is about how CSS styles cover the original style? Using Vue custom to achieve the overlay elementui style, there is a certain reference value, the need for friends can refer to, I hope to help you.

In the development, most of us have to combine their own actual situation to do to meet the requirements of this project style, then the custom CSS style how to overwrite the original already written style? The main thing today is to combine Vue and Elementui to write your own custom style.

Introduce yourself to write the CSS location as follows:

1, Local introduction: use in their respective Vue files, non-interference

The keyword inside the style tag scoped "Limit Mark"

Add the role of this keyword: restrict the style inside this style to the component, without affecting the other components.

2, Global Introduction: Acting on the global, so that a lot of content use this style

This is going back to App.vue.

Step one: Create your own CSS file that specializes in custom styles

Step Two: Create a new <style></style> in App.vue

Step three: Introduce the CSS file to the style tag via the import ' CSS file location ' as a global style overlay

The above can implement a custom CSS overlay original style.