[Bug Report] In manually import, ".el-icon" & ".el-input__icon" style error

element-plus / element-plus

🎉 A Vue.js 3 UI Library made by Element team

https://element-plus.org

MIT License

24.58k stars 16.66k forks source link

[Bug Report] In manually import, ".el-icon" & ".el-input__icon" style error #5667

Closed TothingWay closed 2 years ago

TothingWay commented 2 years ago

Element Plus version

1.3.0-beta.9

OS/Browsers version

MacOS 11.6.2 / Chome 96.0.4664.55

Vue version

3.2.29

Reproduction Link

https://github.com/TothingWay/test-ep

Steps to reproduce

use unplugin-element-plus import element-plus components
Add "show-password" to el-Input component
You can see the eye icon style error
I found that is .el-icon style overrides the .el-input__icon style

What is Expected?

The eye icon style is displayed correctly

What is actually happening?

The eye icon style display error

cn-troy commented 2 years ago

按需引入的ElInput .el-input__icon样式被.el-icon覆盖导致高度为1em，不太理解这个css优先级，我改不了😢。 @emojiiii

emojiiii commented 2 years ago

好的，我看看

yudan215 commented 2 years ago

使用suffix同样有此问题

momtboy commented 2 years ago

使用ElNotification 组件出现同样的问题，样式被覆盖

zhangchenna commented 2 years ago

el-icon引起的已经至少2 3周了

TothingWay commented 2 years ago

@JeremyWuuuuu

emojiiii commented 2 years ago

很抱歉，最近在忙着写正式版的文档。会尽快修复的~

emojiiii commented 2 years ago

这似乎是按需导入时组件的顺序影响了组件的样式权重

yudan215 commented 2 years ago

这似乎是按需导入时组件的顺序影响了组件的样式权重

好像是·这2天不知道改了啥·又可以了

emojiiii commented 2 years ago

好像是·这2天不知道改了啥·又可以了

没有改什么，还是有问题。需要改变一下css的权重

xjphhh commented 2 years ago

啥时候修复啊。el-icons样式层级太高了，急急急！！！

emojiiii commented 2 years ago

啥时候修复啊。el-icons样式层级太高了，急急急！！！

如果真的很急，你可以先去掉插件引入，先手动引入解决这个问题。这主要是组件引入顺序导致的问题，你只要先把 el-icon这个组件先引入了，其他组件后引入就不会有这样的问题了

xjphhh commented 2 years ago

请问你说的去掉插件引入，手动引入是指怎么操作？去掉vite的unplugin-auto-import/vite和unplugin-vue-components/vite这两个插件吗改用unplugin-element-plus这个插件吗

emojiiii commented 2 years ago

请问你说的去掉插件引入，手动引入是指怎么操作？去掉vite的unplugin-auto-import/vite和unplugin-vue-components/vite这两个插件吗改用unplugin-element-plus这个插件吗

所有插件都不使用。手动引入组件注册，自行引入样式就好

xjphhh commented 2 years ago

请问你说的去掉插件引入，手动引入是指怎么操作？去掉vite的unplugin-auto-import/vite和unplugin-vue-components/vite这两个插件吗改用unplugin-element-plus这个插件吗

所有插件都不使用。手动引入组件注册，自行引入样式就好

unplugin-vue-components/vite这个插件还是挺方便的，我还是想留着自动引入vue组件，是不是只要我不用ElementPlusResolver这个方法就行了，这样就不会自动导入ui组件了，我手动导入ui组件

emojiiii commented 2 years ago

unplugin-vue-components/vite这个插件还是挺方便的，我还是想留着自动引入vue组件，是不是只要我不用ElementPlusResolver这个方法就行了，这样就不会自动导入ui组件了，我手动导入ui组件

是的

xjphhh commented 2 years ago

unplugin-vue-components/vite这个插件还是挺方便的，我还是想留着自动引入vue组件，是不是只要我不用ElementPlusResolver这个方法就行了，这样就不会自动导入ui组件了，我手动导入ui组件

是的

好的，我知道了，我先手动导入，静候你们修复佳音！加油