Extending CSS classes of frameworks with css modules

I am currently developing a react project and in some cases have to extend CSS classes of frameworks like bootstrap with attributes. For example, I want to change the background color of this class (https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/AdminLTE.css#L99).

How can I do this with babel-plugin-react-css-modules? I only have the possibility to use my own CSS class or the one of 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>;
  }
}

In the project we use webpack (v4.41.0), babel (v7.6.2) and react (16.10.1). To use CSS classes we are using the babel plugin babel-plugin-react-css-modules which uses css modules.

What is a modern and contemporary way to do this?

I have found a solution, you simply have to name both classes one after the other:

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>;
  }
}