element组件样式修改记录

最新推荐文章于 2025-02-25 11:52:25 发布

原创最新推荐文章于 2025-02-25 11:52:25 发布 · 756 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #vue.js #前端

在使用ElementUI的NavMenu时遇到二级菜单宽度过宽的问题，尝试了使用>>>::v-deep/deep/以及!important修饰器都无法改变。最终通过在HTML根文件内添加样式解决了，但这种方法不适用于所有场景。将样式加入全局的golb.scss文件是更合适的做法，尤其对于一次性使用的组件。

NavMenu 导航菜单https://element.eleme.cn/#/zh-CN/component/menu

在使用element的导航菜单时候，发现下拉二级菜单的宽度太宽了，想要修改，结果在页面中找到了相关元素，使用了>>> ::v-deep /deep/ 加important都不能改变

后来查了好多，看到一个最暴力的，在inhtml文件上改。。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>data-analysis</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <style>
      .el-menu--popup{
        min-width: 116px !important;
      }
    </style>
  </body>
</html>

后来问了一嘴，不要在根文件进行更改，就给它塞到了全局注册的golb.scss里只要就直接改变了