Vue and Element-UI cascaded drop-down box custom style

Element-UI cascading drop-down box custom style tips: find the corresponding CSS class name and accurately modify the style. Use direct overlay styles with caution, and it is recommended to use depth selectors or CSS variables. Avoid breaking component encapsulation, it is better to use CSS variables to indirectly modify styles. Read the official documentation carefully and locate the CSS class name that needs to be modified. If you encounter !important forced style, you can override !important or modify the Element-UI source code (not recommended).

Vue and Element-UI Cascading Pull-down Box: Art and Traps of Custom Styles

Many students will encounter situations where they need to customize the cascading selector style when using Vue and Element-UI to do projects. Why? The default style of Element-UI, um...how to say, it sometimes does not conform to the aesthetics of the design draft, or is incompatible with the overall project style. Therefore, custom styles have become commonplace. But this seemingly simple operation has hidden mystery inside, and if you are not careful, you will fall into the pit.

Let’s talk about the cascading selector itself first. It is essentially a multi-layer nested selection structure, each level contains selections, and the user selects in turn to finalize a value. Element-UI has already packaged this component for us, which is very convenient to use, but to deeply customize its appearance, you need to have an in-depth understanding of its internal mechanism.

Element-UI's cascade selector, its style is actually the result of the combined action of multiple CSS class names. You have to find these class names to accurately modify the style. It's like unlocking a password lock and finding the right combination to open it. If you directly use style attribute to overwrite the style on <el-cascader></el-cascader> , it will often result in half the result with twice the effort and may even be invalid. Why? Because Element-UI's components use a lot of scoped CSS inside, your style may not be penetrated at all.

The correct posture is: use the depth selector ( or /deep/ ), or, more recommended, it is to use the CSS variable mechanism provided by Element-UI. Although the depth selector can directly modify the internal style of the component, it destroys the encapsulation of the component and is troublesome to maintain. When upgrading Element-UI in the future, your custom style may be invalid. So, I personally prefer to use CSS variables.

For example, suppose you want to modify the background color and text color of the selected item:

 <code class="css">:root { --el-cascader-selected-bg: #f0f0f0; /* 自定义选中背景色*/ --el-cascader-selected-color: #333; /* 自定义选中文字颜色*/ }</code>

Then introduce this variable in your component, or in the global CSS file. In the source code of Element-UI, many styles are defined based on these variables. By modifying the values ​​of these variables, the style of the component can be indirectly modified and the encapsulation of the component can be maintained.

Of course, this is just the tip of the iceberg. In actual projects, you may need to modify the width, height, border, font, etc. of the drop-down menu, and even adjust the arrangement of menu items. At this time, you need to carefully read the official documentation of Element-UI, find the corresponding CSS class name, and then make accurate modifications. Remember, make good use of browser developer tools, which can help you quickly locate the CSS class name that needs to be modified.

Also, a common pitfall is: You may find that even if you use depth selectors or CSS variables, some styles still cannot be modified. This is usually because the Element-UI uses !important internally to force the style to specify. Faced with this situation, you can only choose a more ruthless trick: cover!important, or directly modify the source code of Element-UI (not recommended, unless you know the source code of Element-UI very well and are ready to re-modify it after upgrading).

Finally, let me share a little bit of my experience: before modifying the style, be sure to back up your code, or create a new branch. In this way, even if you modify it wrongly, you can easily fall back. Remember, the code modification is reversible, but the time is irreversible. Only by writing code and working steadily can you avoid unnecessary trouble. Custom styles are like carving a work of art. They require patience and meticulousness, and a deep understanding of the internal mechanisms of the components. Don't rush to achieve success. Try more and practice more, and you can master this skill.

The above is the detailed content of Vue and Element-UI cascaded drop-down box custom style. For more information, please follow other related articles on the PHP Chinese website!