Vue和React的样式穿透

您所在的位置：网站首页 › deep选择器 › Vue和React的样式穿透

Vue和React的样式穿透

2023-10-11 12:52| 来源: 网络整理| 查看: 265

一般我们在写组件的时候，为了防止被其他组件内的样式冲突，习惯写一些局部样式，采用modules方案解决组件间的覆盖问题。

但是如果html里有些class是需要根据条件判断来显示的话，在样式编译的时候，编译器会默认该样式不存在，从而直接把样式文件里写的class样式被忽略掉，最后编译出来的样式就会没有我们写的class样式，那这时候就需要使用样式穿透解决。

一、VUE

当我们在Vue组件中需要局部修改其他组件的样式，同时又不想去掉 scoped 属性造成不同组件之间的样式污染。

在vue2中我们有/deep/ 或者 vue3中的:deep(.className)

可以用以下方法来穿透scoped。

外层 >>> 其他组件类名 { 样式 } 注意：有些Sass 之类的预处理器无法正确解析 >>>，可以用 /deep/ 或 ::v-deep( >>> 的别名) 来代替。 /deep/ 其他组件类名 { 样式 } 外层 ::v-deep 其他组件类名 { 样式 } 二、REACT

使用 :global(.className) 可以实现样式穿透，针对局部class类名下的全局UI组件，可以这么用：

.divBox { :global(.content){ ... } } /* 定义全局样式 */ :global(.text) { font-size: 16px; } /* 定义多个全局样式 */ :global { .footer { color: #ccc; } .sider { background: #ebebeb; } }

注意：如果 .divBox 的 .content也是通过style调用了，就没效果了，这时候就需要className写成字符串的形式

import styles from './styles.less' const Model:React.FC = () => { let activeType = 1; return ( ) } export default Model;

【本文地址】

Vue和React的样式穿透

Vue和React的样式穿透

今日新闻

推荐新闻