Расширение классов CSS фреймворков с помощью модулей CSS

Question

Я сейчас занимаюсь разработкой реактивного проекта, и в некоторых случаях мне приходится расширять классы CSS фреймворков, таких как начальная загрузка, с атрибутами. Например, я хочу изменить цвет фона этого класса (https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/AdminLTE.css#L99).

Как я могу сделать это с babel-plugin-реагировать-css-modules ? У меня есть только возможностьиспользовать мой собственный класс 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>;
  }
}

В проекте мы используем webpack (v4.41.0), babel (v7.6.2) и реагировать (16.10.1). Использовать CSSклассы мы используем babel plugin babel-plugin-реагировать-css-modules, который использует модули css.

Каков современный и современный способ сделать это?

Answer 1

Я нашел решение, вы просто должны назвать оба класса один за другим:

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