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

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

一、VUE

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

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

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

<style scoped>

    外层 >>> 其他组件类名 {
        样式
    }

</style>


注意：有些Sass 之类的预处理器无法正确解析 >>>，可以用 /deep/ 或 ::v-deep( >>> 的别名) 来代替。

<style scoped>

    /deep/ 其他组件类名 {
        样式
    }


    外层 ::v-deep 其他组件类名 {
        样式
    }

</style>

二、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 (

      <div className={styles.divBox}>
        <span className={activeType == 1 ? 'content' : ''}></span>
      </div>
   )
}

export default Model;