如何在反应中用css模块模式覆盖外部模块类答案

【问题标题】：How to override external module class with css module pattern in react如何在反应中用css模块模式覆盖外部模块类
【发布时间】：2020-06-27 07:00:57
【问题描述】：

我想在本地为组件覆盖外部模块cssclass

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 元素，其类为parent。所以如果我要导入 ExternalComponent 如何在本地导入的style 模块中覆盖ExternalComponent 的parent 类，以便ExternalComponent 中的样式仅针对此组件更改只有，否则我使用它的地方不会改变。

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

【问题讨论】：

标签： css reactjs css-modules react-css-modules babel-plugin-react-css-modules

【解决方案1】：

style.module.css

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

然后你的 jsx 去：

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

【讨论】：

global是指什么
您显示的 style.module.css 语法显示错误
也许我们正在使用不同风格的 css 模块语法。 :global 告诉 css 模块取消 css 类名“.parent”的后缀。没有它，css 模块系统默认输出诸如“.parent-2a8fb”之类的东西。我不确定您使用的是哪种口味，请查看文档。