ElementPlus 覆盖默认样式的探索

文章目录

• 问题
• 解决
• [:global 解释](#:global 解释)
• 改进一下
• 在研究一下

问题

解决

使用 :global(.el-header)

:global(.el-header) {
    padding: 0;
}
:global(.el-menu--horizontal) {
    justify-content: center;
}

:global 解释

在Vue中，:global() 是一个特殊的 CSS 选择器，用于在 Vue 单文件组件（SFC）中编写全局样式。通常，在 Vue SFC 的

:global() 允许你在组件的 <style> 标签中定义的样式不受 scoped 限制，而是像普通的 CSS 文件那样应用到整个页面。这对于覆盖全局样式或应用一些通用的样式非常有用。

改进一下

既然 global 会影响全局的，那么就让它的影响变得最小吧

这里不用 important 也可以，我忘记删掉了

在研究一下

我又想了一下，还可以往上层节点设置 id 属性

这样应该就可以了