react：css样式穿透

假设我们有个index.tsx文件以及index.less样式文件

index.less

.rowSelectDisable{
    .content{...}
}

index.tsx引入index.less

import style from './index.less'

index.tsx DOM

<div className={style.rowSelectDisable}>
	<Detail></Detail> // 假设Detail组件里面有个类名：content
</div>

页面渲染后

<div class="rowSelectDisable___3bt-3">
    <div class="content">
        ...
    </div>
</div>

此时，index.less文件里面的.content`样式是否会生效？

并不会！

一般们在写react组件的时候，习惯写一些局部样式，为了防止被其他组件内的样式冲突，采用modules方案解决组件间的覆盖问题，那么当我们在组件内使用全局的一些UI组件的时候，需要在此组件内覆盖样式，就需要样式穿透解决。

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

那么在react中我们如何使用？

:global(.className)

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

index.less

.rowSelectDisable{
    :global(.content){...}
}

即可！