当我们对下拉菜单内的item的样式进行修改时，我们可以使用文章来源：https://www.toymoban.com/news/detail-518252.html
<style lang="scss" scoped>
// 由于下拉框不在.app组件里面，所以使用global设置全局的下拉框样式
:global(.el-dropdown-menu__item) {
line-height: 36px;
padding: 6px 22px;
color: red;
}
}
</style>
但是这样就会导致全局的下拉框样式都变为一样，为了避免这种情况，我们可以使用dropdown中的popper-class属性文章来源地址https://www.toymoban.com/news/detail-518252.html
<!-- 下拉菜单 -->
<div class="dropdown">
<!-- 在el-dropdow添加popper-class -->
<el-dropdown trigger="click" popper-class="dropDownStyle">
<span class="el-dropdown-link">
{{ userName }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="CircleClose">退出登录</el-dropdown-item>
<el-dropdown-item icon="InfoFilled" divided>个人信息</el-dropdown-item>
<el-dropdown-item icon="Unlock" divided>修改密码</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<style lang="scss" scoped>
:global(.dropDownStyle .el-dropdown-menu__item) {
line-height: 36px;
color: red;
padding: 6px 22px;
}
</style>
到了这里，关于element-plus修改下拉菜单Dropdown-Item 样式（popper-class）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
