样式问题

来源:5-7 方案落地:处理项目国际化内容

hmxs_hmbb

2023-09-26

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

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

比如这里, 是直接在父组件中导入子组件之后; 直接个子组件加上了一个类名
然后直接用 deep 修改子组件的样式, 比如这个
图片描述
这里的在父组件中定义的样式, 是直接影响到了子组件的样式了吗; 换句话说, 这里就是直接在写子组件的样式

但是我在写一个修改国际化语言的组件的时候, 我给最外层添加了一个 div
图片描述
然后, 父组件的样式就没有影响到子组件, 这是为什么呢?

您还有的时候, 还是在父组件中引入子组件, 且给这个子组件添加了一个类目
但是, 在父组件中写样式的时候, 是没有添加 deep 的; 但是添加的样式照样在子组件中生效
我的理解是, 因为子组件中没有书写父组件中的样式, 所以生效了
如果, 父组件中书写的样式, 和子组件中的样式冲突了; 父组件中的样式不生效
可以这样理解吗?
图片描述
图片描述
这个地方又添加了 deep , 我查看了一下样式; 发现 element 面包屑中定义了 color 的样式
所以这一个地方要加上 deep , 修改掉 element 的样式, 是这样吗?

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

写回答

1回答

Sunday

2023-09-27

你好

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

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

0
2
Sunday
回复
hmxs_hmbb
这个其实是代码量的问题,写得多了就熟了 😂
2023-09-28
共2条回复

基于Vue3新标准,打造后台综合解决方案

基于Vue3重写Vue-element-admin,打造后台前端综合解决方案

1941 学习 · 1687 问题

查看课程