样式问题

Question

就是 deep 深度作用符这一个问题, 我一直没明白透; 我看您写样式, 有时候用 deep , 有时候又不用
我认知的 deep 就是在父组件中去影响到子组件的样式, 因为子组件添加了 scoped 进行了私有化, 为了避免多组件间的样式名重名的问题

比如, 单纯的在父组件中, 影响第三方组件库的样式, 我就是直接使用 deep ; 这个我是知道的
但是, 您写样式有时候加 deep ; 有时候又不加 deep

比如这里, 是直接在父组件中导入子组件之后; 直接个子组件加上了一个类名
然后直接用 deep 修改子组件的样式, 比如这个

这里的在父组件中定义的样式, 是直接影响到了子组件的样式了吗; 换句话说, 这里就是直接在写子组件的样式

但是我在写一个修改国际化语言的组件的时候, 我给最外层添加了一个 div

然后, 父组件的样式就没有影响到子组件, 这是为什么呢?

您还有的时候, 还是在父组件中引入子组件, 且给这个子组件添加了一个类目
但是, 在父组件中写样式的时候, 是没有添加 deep 的; 但是添加的样式照样在子组件中生效
我的理解是, 因为子组件中没有书写父组件中的样式, 所以生效了
如果, 父组件中书写的样式, 和子组件中的样式冲突了; 父组件中的样式不生效
可以这样理解吗?


这个地方又添加了 deep , 我查看了一下样式; 发现 element 面包屑中定义了 color 的样式
所以这一个地方要加上 deep , 修改掉 element 的样式, 是这样吗?

最后一个问题就是, 您能给我说说您写样式的习惯吗?
如果我自己来写样式, 我的一个思路就是子组件书写大部分的样式, 父组件中样式就只控制这一个子组件在父组件中的显示位置
基本上样式都是在子组件中完成的, 父组件就只修改一些是一行显示啥的

Answer 1

Sunday 2023-09-27 23:12:09

你好

其实 scoped 的概念是【是否影响子集的 dom】。也就是说，如果 子组件只有一个根节点的话，那么是不需要使用 deep 的，而如果想要修改的是 子组件根节点之下的 dom ，那么就需要使用到 deep 。

我个人的书写样式习惯其实是比较随意的 😂 ，只要是可以实现 css 效果就可以

• 提问者 hmxs_hmbb #1

  我懂了，老师我看您写一个功能之前，您处理问题的思路是非常清晰的，我认为我自己在思路分析上面不够清晰，这个怎么锻炼啊，遇到一个难点，心里就发怵😂

• Sunday 回复 提问者 hmxs_hmbb #2

  这个其实是代码量的问题，写得多了就熟了 😂