修改elementui默认样式加deep不起作用

如果您想修改 ElementUI 的默认样式，可以使用 SCSS 变量或者覆盖样式。但是，如果您的样式不生效，可能是因为 CSS 的选择器优先级问题。

在 CSS 中，选择器的优先级是根据不同的选择器组合来计算的。通常来说，ID 选择器的优先级最高，其次是类选择器和属性选择器，最后是元素选择器。在 ElementUI 中，大部分的样式都是使用类选择器来设置的。

如果您想在修改 ElementUI 样式时优先级更高，可以添加 `!important` 来使样式生效。例如：

.el-button {
  background-color: red !important;
}

但是，使用 `!important` 会让样式变得难以维护和调试，因此建议尽量避免使用。如果您的样式没有生效，可以尝试使用 `deep` 关键字来加强选择器优先级。例如：

::v-deep .el-button {
  background-color: red;
}

在这个例子中，`::v-deep` 是 Vue 提供的一种选择器，可以穿透子组件，加强选择器优先级。注意，`::v-deep` 只在 Vue 2.x 中可用，在 Vue 3.x 中已经被废弃，可以使用 `::v-slotted` 来代替。

另外，如果您使用的是 Vue CLI 3.x 或 4.x，可以在 `vue.config.js` 中配置 `css.loaderOptions` 来全局修改 ElementUI 样式。例如：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
          @import "~element-ui/packages/theme-chalk/src/common/var.scss";
          @import "~element-ui/packages/theme-chalk/src/common/mixins.scss";
        `,
      },
    },
  },
};

在这个例子中，我们通过 `additionalData` 导入了 ElementUI 的 SCSS 变量和混合，以便在自定义样式中使用。注意，需要安装 `sass-loader` 和 `sass` 才能使用 SCSS。