Without further ado, let's serve the dishes directly.
The default size of the Rate scoring component provided by ElementUI is as follows
The icon is too small, I want to set the width, height, line height, size, but the code doesn't work.
Turn on browser debugging and find that it is only useful to use font-size settings.
Therefore, there is a priority problem in the code, and the priority should be increased.
>>>Use as deep selector in css :
So just change the font-size value for el-rate_icon and el-rate__text in the code, and add /deep/ before the style name to increase the priority .
Note here that the class name comes with the component, otherwise it will not take effect.
So setting the icon size and label properties of other ElementUI components is the same.
In fact, there are some other ways:
1. You can make the style take effect by directly removing <style lang="less" scoped>the middle scoped. Although it is simple and rude, it is not a very good method.
2. Define a global style, such as global.css, and main.jsimport it in , so that the style is mounted globally, and the custom style written in it will also take effect.
If there is any error in the description, please correct me!