如何在react中用css模块模式覆盖外部模块类

Question

我想在本地覆盖组件的外部模块css类

In my code

import `style` from './style.module.css' // this is local css module 
import `ExternalComponent` from 'ExternalComponent' // suppose this is external module i'm using 
function Component(){
return(
<ExternalComponent/>
)
}

现在ExternalComponent呈现具有类parent的div元素。因此，如果我正在导入ExternalComponent如何在本地导入的style模块中重写ExternalComponent的parent类，以便ExternalComponent中的样式仅对此组件更改只是，否则我使用它的地方不会改变。

顺便说一下，我正在使用react

Answer 1

style.module.css

.whatever-name-scope {
:global {
.parent {
// override here
}
}
}

然后你的jsx去：

function Component(){
return (<div className={style.whateverNameScope}>
<ExternalComponent/>
</div>)
}