上周去面试，被问到了一个问题，如何在某个vue父组件中去设置子组件的的某一个样式？

以Element-ui为例，我当时使用element-ui的时候，去修改样式是直接在最外部的全局css中去覆盖原有类名的样式，但是这样子做会导致以后修改样式比较麻烦，不方便修改。也有试过把style中的scoped去掉，但是也没办法影响到element-ui的组件样式，而且去掉scoped后，该组件的样式可能会影响到其他组件的样式。

在多方搜索后，在知乎上看到一个大佬给出了一个解决办法。那就是在父组件写css时，样式选择器中加上 /deep/或者 >>> 这两个标记，即可渗透到子组件的样式中。（在scss里面，则需要使用 ::v-deep）

当然，得vue-loader 11.2.0 才开始支持，官方文档 Scoped CSS | Vue Loader

比如说我要设置el-input的背景颜色，一般这样子去设置，是没有效果的。

但是如果加上/deep/或者>>>后

子组件的样式就被父组件的样式给修改了。

知乎文章地址：https://zhuanlan.zhihu.com/p/29266022 感谢这位大佬

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue