When reusing public components in recent projects, the value of the style in CSS needs to be constantly changed for different scenarios, and there is already a global public component style
If you use Vue’s traditional dynamic binding method of class and style to modify the style (mentioned at the end of the article), you need to write a lot of additional variables and module classes. Then if the value of my style can be obtained from the parent component, Passed to the subcomponent, the subcomponent renders the value of the corresponding style based on the passed in value. In fact, it means using the variables in data and props in the style. How to do this?
Related learning recommendations: javascript video tutorial
It’s actually very simple, it only takes three steps, let’s take a look:
1. HTML structure
2. Set "CSS variables" within the scope of the scope