Shulou(Shulou.com)06/03 Report--

This article is to share with you about the four ways to modify the default css style of the element-ui component in vue, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Preface

Changing the default style of element-ui components has always been a growing topic, and after an entire project in the company, I summarized the following four ways to change the default style of element-ui.

1. Use global uniform override

For some general-purpose, fixed-style components, it can be handled globally by creating a new css or scss file to overwrite the original class of element

You can create a new element-ui-reset.scss under the src/styles directory and modify the original class name according to the needs of UI

The advantage of using scss is that you can use variables to cope with different changes in UI.

For example, our commonly used components such as buttons, paging and check boxes are basically the same design in UI, so I can modify these styles uniformly.

Element-ui-reset.scss

$danger-btn-color: # F25454After color color primary-btn-color; font-size 3d66e4colorful color change the default button color. El-button--primary {background-color: $primary-btn-color; border-radius: 4px; / / border: 1px solid $color: 16px; border: 0 } / / modify the color of the danger button. El-button--danger {background-color: $danger-btn-color; border-radius: 4px; / / border: 1px solid $danger-btn-color; font-size: 16px; border: 0;} / modify the color of the successful button. El-button--success {background-color: $success-btn-color; border-radius: 4px / / border: 1px solid $success-btn-color; font-size: 16px; border: 0;} / modify the default button color. El-button--default {font-size: 16px; border-radius: 4px;} / / modify the color of the successful button. El-button--warning {/ / background-color: $success-btn-color; border-radius: 4px / / border: 1px solid $success-btn-color; font-size: 16px; border: 0;} / modify the page color. El-pagination {position: absolute; display: inline-block; margin: 0 auto; left:50%; transform: translateX (- 50%); background-color: # fafafa; border: solid 1px # dfe8eb Padding: 0! important;. El-pager {margin: 0! important; .number {color: # 3d66e4! important; border-left: 1px solid # dfe8eb; border-right: 1px solid # dfe8eb; background-color: # fafafa! important & .active {color: # fff! important; / / border: 1px solid # 3d66e4; background-color: # 3d66e4! important; border: 1px solid # 3d66e4! important .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background. El-pager li {margin: 0! important; background-color: # fafafa! important } / / modify checkbox.el-checkbox__inner {border: 1px solid # C0C0C0; width: 16px; height: 16px; border-radius: 0;}

And then introduce it into your main.js

Import'. / src/styles/element-ui-reset.scss'

Like this

Advantages

Global coverage, save trouble

More flexibility in using scss

You can delete the overlay of a style at any time

Shortcoming

Need to be re-overwritten when partial modification

All modified component styles are the same

two。 Modify in a .vue file

This method is to add a new style tag to the vue file.

Used to modify some specific component styles, but not applied globally

For example, a specially customized table component is required in a .vue file, while other files need to use the original style

In this way, the best way to deal with it is to add a new style tag to the .vue file.

Change the default style of table here

/ * modify the style of table components in element-ui * / .my-class__expand-column .cell {display: none;}. My-class. El-table tbody tr:hover > td {cursor: pointer;}. My-class. El-form. El-form-item. El-input__inner:focus {border: 1px solid # 3D66E4;}

Note, however, that the only scope is the outermost class name, such as the my-class above me. It restricts the modification style of the current table to be valid only in that class and its child elements

Otherwise, the style of table will still be overridden globally

Of course, if you like, you can replace class with id, which ensures that class names will not conflict.

/ * modify the style of table components in element-ui * / # my-class__expand-column .cell {display: none;} # my-class. El-table tbody tr:hover > td {cursor: pointer;} # my-class. El-form .el-form-item. El-input__inner:focus {border: 1px solid # 3D66E4;}

The advantage of this approach is that you can bind some class dynamically.

/ * modify the style of table components in element-ui * / # my-class__expand-column .cell {display: none;} # my-class. El-table tbody tr:hover > td {cursor: pointer;} # my-class. El-form. El-form-item. El-input__inner:focus {border: 1px solid # 3D66E4 } # my-class. My-table {}

Advantages

Flexible customization and dynamic binding

Will not be modified globally

Shortcoming

Need to specify a unique class scope

3. Modify the style style of a component

I don't recommend this method very much. Redundancy aside, I can't guarantee its effectiveness (depending on the support of the element-ui source code).

However, for some components that are rarely used but require dynamic binding properties, you can use it

For example, for this component, I may need to bind some dynamic style properties to it

So you can bind it to style.

Data () {return {_ width: 50%}}

Advantages

Flexible and convenient

Dynamic binding

Shortcoming

redundancy

High coupling

4. Refer to the api of the element-ui official documentation

Some components are provided with modified api on the official website.

You can specify the style of the component according to api

Advantages

Official

Shortcoming

There are few supporting components

Doubt

Why add a new style tag?

Because in the course of actual use, I found that some class written with the scoped attribute do not work on element-ui components

As a result, some modified styles can be used and some can not, so the style tag is simply rewritten.

Why not! important property

This guy is so bossy that he is even more mandatory than the overall revision. And it's troublesome to write.

Why not:: v-deep Penetration

First of all, apart from the disgusting writing, the coupling is too high.

If you only need to delete the new style tag when you don't need a style override

With:: v-deep, who can bear to change it line by line?

Summary

The above method is not very official, but it is summed up after stepping on the hole in my daily development.

It's not perfect, but it solves my problem to a great extent.

These are the four ways to modify the default css style of element-ui components in vue. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.