react如何做scss样式穿透

1.问题背景

假如有一个组件Son，可以在任意页面中调用，然后需求是Son组件被不同的父组件调用，可以展示不同的样式，大致代码像这样：

// Son
<div className={styles.btnStyle}>
  这是一个按钮
</div>

// Father
<div className={styles.father}>
  <Son />
</div>

面对这个需求，一开始想到了通过props传自定义样式，例如

// Father
<div className={styles.father}>
  <Son customStyle/>
</div>

// Son
<div className={styles.btnStyle} style={{...props.customStyle}}>
  这是一个按钮
</div>

恩，试了下，确实可以实现。
但是突然想到，这样还需要多传个参数，而且既然子组件是挂载在父组件下的，那我能否通过父组件直接修改子组件的样式？撸码试试！

// Father的scss文件
.father {
  .btnStyle{
    // 一些样式
  }
}

// Father
<div className={styles.father}>
  <Son/>
</div>

// Son
<div className={styles.btnStyle} >
  这是一个按钮
</div>

然后神奇的发现，居然不行，没生效！?
有点意思，找找问题所在

2.问题原因和解决办法

后面F12，看了一下代码，才发现原因。
react为了防止组件间的样式冲突，采用css-modules方案去做了样式隔离处理，将class加上了一些不规则的序列号，例如像这样：

所以上面那样写，才不会生效。
要让他生效，也简单，就是做样式穿透了，由于我用的是scss，所以就以scss为例。
在scss中，我们可以用global(.className)来做到样式穿透，就是让被global包裹住的class不被样式隔离化，维持原有的名称，写法的话类似这样就可以生效了

// Father的scss文件
.father {
  :global(.btnStyle){
    // 一些样式
  }
  // 或者
  :global(#btnStyle){
    // 一些样式
  }
}

// Father
<div className={styles.father}>
  <Son/>
</div>

// Son
<div className={styles.btnStyle} id='btnStyle'>
  这是一个按钮
</div>

3.题外话：Vue怎么做scss样式穿透呢？

vue项目的话，也简单，像下面这样写就行了

<style lang="scss" scoped>
	.father ::v-deep {
		.btnStyle{
			// 一些样式
		}
	}
	// 或者
	.father /deep/ {
		.btnStyle{
			// 一些样式
		}
	}
</style>