Vue customizes width and height using components of element-ui

If the

component does not provide an interface to set the width and height, what if you want to change the width and height yourself?

the current method is to use important override reset in the scss file that initializes global variables, which is unreasonable. If this component is to be reused to other interfaces of this project, what if you want to use different widths and heights?

is there a better way


I have seen several of these problems. In addition to inline style or important, a better way is to download a style file of the component library, then overwrite it according to your own needs, import the project, and then introduce custom styles with on-demand plug-ins to achieve the overlay effect. For more information, see here

I'm going to give you a structure in a project I'm working on right now,

.

clipboard.png

element-theme-development is the directory used to override the original style, and element-theme is the directory location where babel imports component styles on demand.


components are wrapped in a layer to control their own width and height.


after all, other UI frameworks are used, and too much customization certainly won't work. Now I just add my own class name to the components that need to be customized, and then write a global style file in index.html with important, similar to your method


, unify the styles you need, and then import them in different projects. That's what I did. I hope it will be helpful to you


/ deep/ .el- * {}; Try
ide/scoped-css.html-sharp%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F" rel=" nofollow noreferrer "> link description


custom components can be encapsulated by themselves, and you can change them uniformly with writing logic.

Menu