css - 如何在反应中使用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渲染一个div带有 class 的元素parent。因此，如果我正在导入 ExternalComponent如何覆盖本地导入模块中的parent类，以便仅针对此组件更改样式，而我使用它的其他位置不会更改。ExternalComponentstyleExternalComponent

顺便说一句，我正在使用反应。

Answer 1

样式.module.css

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

然后你的 jsx 去：

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