使用CSS模块扩展框架的CSS类

我目前正在开发一个react项目，在某些情况下，我必须扩展框架的CSS类，比如带有属性的bootstrap。例如，我想更改这个类（）的背景色

如何使用babel插件和css模块实现这一点？我只能使用我自己的CSS类或AdminLTE：

import React from 'react';
import bootstrap from 'boostrap';
import foo from './Foo.css';

export default class Foo extends React.Component {
  render () {
    return <div styleName='foo.main-footer'>Hello World</div>;
    or
    return <div styleName='bootstrap.main-footer'>Hello World</div>;
  }
}

从“React”导入React；
从“boostrap”导入引导；
从“/foo.css”导入foo；
导出默认类Foo扩展React.Component{
渲染（）{
返回你好世界；
或
返回你好世界；
}
}

在这个项目中，我们使用webpack（v4.41.0）、babel（v7.6.2）和react（16.10.1）。为了使用CSS类，我们使用了babel插件babel插件react CSS模块，它使用CSS模块

---

什么是现代和现代的方法来实现这一点？

我找到了一个解决方案，您只需将两个类一一命名：

import React from 'react';
import bootstrap from 'boostrap';
import foo from './Foo.css';

export default class Foo extends React.Component {
  render () {
    return <div styleName='bootstrap.main-footer foo.main-footer'>Hello World</div>;
  }
}

从“React”导入React；
从“boostrap”导入引导；
从“/foo.css”导入foo；
导出默认类Foo扩展React.Component{
渲染（）{
返回你好世界；
}
}